Support for experimental dark mode
See original GitHub issueHi 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:
Any thoughts? 😃
Issue Analytics
- State:
- Created 3 years ago
- Comments:12 (5 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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 !important variant:
important:bg-red-300
@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: