question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for experimental dark mode

See original GitHub issue

Hi there,

When I try to use experimental dark mode, I get an error:

Error: Utility with variant class 'dark' not found"
    at @tailwindcssinjs/tailwindcss-data/lib/transformers/getGenerateTwClassSubstituteRoot.js:52:27

Here’s the snippet:

tw`dark[from-blue-400 via-pink-500 to-red-400 bg-gradient-to-tr]`

Here’s the config file:

module.exports = {
  experimental: {
    darkModeVariant: true
  },
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  purge: {
    content: ['./src/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}']
  },
  important: true,
  dark: 'class',
  plugins: [
    require('@tailwindcss/typography')({
      modifiers: []
    }),
    require('@tailwindcss/ui')
  ]
}

Interestingly, the vscode plugin renders a tooltip correctly: Screen Shot 2020-09-21 at 5 30 25 PM

Any thoughts? 😃

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
Arthiecommented, Sep 22, 2020

Awesome! Yea that will be the more stable solution until tailwindcss figures it out.

Btw @tailwindcss/ui includes @tailwindcss/typography you can remove this dependency if you’d like.

These are my custom plugins, might be of interest:

Add keyframes to tailwindcss base css

  //Add keyframes to tailwindcss base file
  plugin(function ({ addBase, addUtilities, e, theme, variants }) {
    const keyframesConfig = theme('keyframes')
    const keyframesStyles = Object.fromEntries(
      Object.entries(keyframesConfig).map(([name, keyframes]) => {
        return [`@keyframes ${name}`, keyframes]
      })
    )
    addBase(keyframesStyles)
  })

Add !important variant: important:bg-red-300

  //Add !important variant: important
  plugin(function ({ addVariant }) {
    addVariant('important', ({ container }) => {
      container.walkRules(rule => {
        rule.selector = `.\\!${rule.selector.slice(1)}`
        rule.walkDecls(decl => {
          decl.important = true
        })
      })
    })
  })
0reactions
Arthiecommented, Oct 19, 2020

I wonder how you do the dark mode now. With tailwind 1.9.x @Arthie Thanks

@sondh0127 you’ll have to add the dark mode plugin from tailwindcss in your tailwind.config.js. This will be necessary until dark mode becomes a non-experimental feature.

Example:

//tailwind.config.js
module.exports = {
  // ... config options
  dark: 'media', // or 'class'
  experimental: "all",
  future: "all",
  plugins: [
    require("tailwindcss/lib/flagged/darkModeVariantPlugin").default
  ]
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Force Dark Mode on Every Website in Google ...
Search for “Dark Mode” in the search box at the top of the Experiments page that appears. Click the box to the right...
Read more >
How to force Google Chrome to show any website in dark ...
Go the drop-down menu next to Force Dark Mode and select Enabled. At the bottom, hit the Relaunch button to restart your browser....
Read more >
How to Force Dark Mode on Every Website in Google ...
Search for “dark mode” in the search box at the top of the Experiments page that appears. Enter "chrome://flags" into the Omnibar, then...
Read more >
How to Force Dark Mode on any Website in Chrome
Click inside the “Search flags” box and type “Force Dark Mode on Web Contents”. This will filter out all experimental features except the...
Read more >
Blackout: How to Enable Dark Mode on Your Browser
macOS: Head to System Preferences > General and select Dark (or Auto if you want the theme to change based on time of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found