I am trying to enable dark mode based on the system default using tailwind.
To accomplish this I am using the plugin: Tailwind dark mode.
My config fail for tailwind is as follows:
defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
experimental: {
darkModeVariant: true
},
purge: [],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
screens: {
'dark': {'raw': '(prefers-color-scheme: dark)'},
// => #media (prefers-color-scheme: dark) { ... }
},
},
},
variants: {
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'],
textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder'],
opacity: ['responsive', 'hover', 'focus', 'disabled']
},
plugins: [require('tailwindcss-dark-mode')()],
}
defaultTheme = require('tailwindcss/defaultTheme');
And in my html file I am adding the following:
<span class="dark:text-yellow-400">
1
</span>
The plugin checks for my dark mode but the text wont turn yellow it stays black.
Does anyone know why it wont work?
First things first, now TailWIndCSS supports dark-mode out-of-the-box by adding the dark: prefix before any class after it is enabled. Not sure if it is related to the question, but thought you need to know.
The plugin you are using states the following use for enabling dark mode:
< tailwind.config.js >
...
plugins: [
require('tailwindcss-dark-mode')()
]
// To enable dark mode for all classes:
variants: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', ...]
// To enable dark mode for only single utility class:
variants: {
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd']
}
...
It also states that
Styles generated by this plugin are only used if the selector is applied to the <html> element. How you do that is up to you. prefers-dark.js is provided as an option, which is a simple script that enables dark mode based on the user's system theme.
So, to enable dark mode through the plugin, use:
< mypage.html >
...
<body class="mode-dark">
<div class="bg-white dark:bg-black">
<p class="text-black dark:text-white">
My eyes are grateful.
<a class="text-blue-300 hover:text-blue-400">
Learn more
</a>
</p>
</div>
...
</body>
Add that extra mode-dark class to the wrapper element (body in this case).
To change the theme based on user preferences through the plugin:
< mypage.html >
<head>
<script src="to/prefers-dark.js"></script>
</head>
...
<body class="mode-dark">
<div class="bg-white dark:bg-black">
<p class="text-black dark:text-white">
My eyes are grateful.
<a class="text-blue-300 hover:text-blue-400">
Learn more
</a>
</p>
</div>
...
</body>
With the above, the theme will change as the user changes his/her preferences in the system settings.
P.S. If you wanna use dark mode, use the one in-built in TailWindCSS v2. Enable it like this:
< tailwind.config.js >
module.exports = {
darkMode: 'media',
...
}
media can be changed to class.
Media: Now whenever dark mode is enabled on the user's operating system, dark:{class} classes will take precedence over unprefixed classes. The media strategy uses the prefers-color-scheme media feature under the hood.
Class: If you want to support toggling dark mode manually instead of relying on the operating system preference, use the class strategy instead of the media strategy.
Hope this helped you :)
I had this problem due to forgetting to update tailwind.config.js:
I changed:
darkMode: false,
to
darkMode: 'class',
I have a simple watcher in Vue that toggles it via:
document.querySelector('html').classList.add('dark')
document.querySelector('html').classList.remove('dark')
You can read more here:
https://tailwindcss.com/docs/dark-mode
Related
I cannot make a simple media query for the padding of an element. I work with NextJs but it is not the problem because my custom break points work for everything else but this :
When I have a class like className="p-2 sml:p-4" the p-2 overwrites the other class. I think it has to do with the !important attribute given to p-2 by tailwind.
How to make this simple thing ? What am I missing ?
PS: I repeat, this problem has nothing to do with the media query itself, className="bg-black sml:bg-white" works perfectly fine. The sml: is my custom media query that is triggered at 576px, and I repeat, works very well.
Edit: Minimal code to reproduce
<main className="p-2 sml:p-4">
<div className="w-full h-12 bg-black"/>
</main>
Edit: Config file for tailwind version 3.1.2
/** #type {import('tailwindcss').Config} */
module.exports = {
important: false,
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
plugins: [
require('tw-elements/dist/plugin')
],
darkMode: 'class',
theme: {
screens: {
'sml': '576px',
'mdm': '768px',
'nrm': '992px',
'lrg': '1280px',
'max': '1564px',
},
extend: {
},
},
plugins: [],
}
As you said, the problem is that the !important attribute is added to the p-2 class. You can disable whether or not Tailwind's utilities should be marked with !important in your tailwind.config.js file:
module.exports = {
important: false,
}
Reference: https://tailwindcss.com/docs/configuration
I have my Tailwind classes defined like this:
<section class="dark:bg-gray-900 bg-hero-image bg-fixed">
So in the light version a background image is shown and on the dark version just gray-900 as background color.
The image is defined in tailwind.config.js like this:
theme: {
extend: {
backgroundImage: {
'hero-image': "url('/header.jpg')"
},
But this just doesn't work and still shows the image on dark mode.
You have to add backgroundImage to the variants in tailwind.config.js:
module.exports = {
variants: {
extend: {
backgroundImage: ["dark"],
},
},
ALSO you have to add dark:bg-none for the background-image to be set to none.
<section class="dark:bg-gray-900 dark:bg-none bg-hero-image bg-fixed">
This is also nessessary for things like invert and many other classes. Check the corresponding section in the docs, whether or not the variants are included by default.
By default, only responsive variants are generated for invert utilities.
https://v2.tailwindcss.com/docs/invert#variants
I want to build a color palette Blade component, but I noticed that dynamically created Tailwind class strings are not preserved in Tailwinds JIT mode (see Tailwind Docs).
Example
A minimal example of what I want to achieve would look something like this:
/tailwind.config.js
...
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
colors: {
primary-400: '#3892e6',
},
},
};
/routes/web.php
...
Route::get('/', function () {
return view('welcome', ['color' => 'primary']);
});
...
/resources/views/welcome.blade.php
...
<body class="antialiased min-h-screen flex items-center justify-center">
<h1 class="text-4xl text-{{ $color }}-400">{{ $color }}</h1>
</body>
...
The documentations approach of dynamically selecting a complete class name would render the component useless:
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
The documentation mentions two features that might help: Safelisting and Transforming content.
So one way would be transforming the Blade templates to HTML but I believe this is not possible. The other way I can think of, would be generating the Safelist dynamically from the theme object, but I have no clue how to start.
Does anybody have had to tackle this problem before, or can think of another approach?
I am trying to use disabled variant in tailiwnd, but it does not seem to work. I do not know what to do.
I want to change button apperance if it is disabled, I have read the documentation and it says 'disabled' variant in not enabled by default. So I modify my tailwind.config.js and now it looks like this:
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {
extend: {
opacity: ['disabled']
}
},
plugins: [],
}
I have this code in my page, both buttons look the same:
<div class="text-center space-x-8">
<button type="button" class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none disabled:opacity-50" tabindex="-1">
Submit
</button>
<button type="button" class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md disabled:opacity-50" disabled tabindex="-1">
Submit
</button>
</div>
I already re-compiled my code and deleted all my browsers caché, but it still does not work. Do I have to do anything else for this to work?
I found the solution by using play.tailwindcss.com:
This is the syntax I have to use in the tailwind.config.js file:
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {
opacity: ({ after }) => after(['disabled'])
},
plugins: [],
}
I had this problem and updating Tailwind CSS to the latest version fixed it.
npm install tailwindcss#latest postcss#latest autoprefixer#latest
Here's the link: Upgrade Guide -Tailwind CSS It will change other things that you might want to be aware of.
It's now possible to enable all variants by default with the new just in time (JIT) compiler. No need to update your Tailwind config file every time you want to add a new variant.
1. Upgrade to TailwindCSS 2.1 or later
npm i -D tailwindcss#latest
2. Enable JIT mode in your config
// tailwind.config.js
module.exports = {
mode: 'jit',
purge: [
// ...
],
theme: {
// ...
}
// ...
}
3. Explicitely set all files in the purge config
The JIT compiler will look at all these files (and only these files) to generate the CSS on demand. If a file isn't listed here, the CSS won't be generated.
module.exports = {
mode: 'jit',
// These paths are just examples, customize them to match your project structure
purge: [
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
theme: {
// ...
}
// ...
}
Docs: https://tailwindcss.com/docs/just-in-time-mode
For me it was because I was trying to use disabled on a <div> element.
Changing the element to <button> resolved the issue.
I would like to ask if there is any way to use different themes with tailindcss.
Imagine your site has 2 themes - dark and light.
I have a button:
<button class="px-4 bg-blue over:bg-grey-100">Register</button>
This is for the ligth theme.
Is it possible to change the design of the button depending on the theme.
For example in the body i have class: "theme-light" or "theme-dark".
Is it possible to change the classes of the button to apply only for one of the themes.
Something like that theme-dark:bg-orange:
<button class="px-4 bg-blue over:bg-grey-100 theme-dark:bg-orange">Register</button>
If not is there any way to have different themes without writing custom css, or completely rewriting my html pages for the given theme.
If not what's the best way to have 2 or more themes?
Thank you.
It is achievable to have theme-dark and theme-light variants by creating pseudo-class variants. It is detaily described here: https://tailwindcss.com/docs/pseudo-class-variants/#creating-custom-variants
For example, to create theme-dark pseudo-class variant you can do something like this in your tailwind.config.js file:
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addVariant, e }) {
addVariant('theme-dark', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`theme-dark${separator}${className}`)}:theme-dark`
})
})
})
]
}
You can learn more about this here as well: https://tailwindcss.com/docs/plugins/#adding-variants
However, to achieve what you want, you will need to have some javascript behavior that will have a state from which will be able to tell when it is theme-light and when it is theme-dark, which means this is not achievable with 100% only tailwind.
Also Adam Wathan created quick them of this here: https://github.com/adamwathan/theming-tailwind-demo
I hope this answers your question.
The tw-colors plugin does what you want, the big advantage is that you don't need to use variants.
tailwind.config.js
const { createThemes } = require('tw-colors');
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
plugins: [
createThemes({
halloween: {
'primary': 'orange',
'secondary': 'yellow',
},
summer: {
'primary': 'pink',
'secondary': 'red',
},
winter: {
'primary': 'blue',
'secondary': 'green',
},
party: {
'primary': 'steelblue',
'secondary': 'darkblue',
},
})
],
};
use themes like this with class:
<html class='theme-halloween'>
...
</html>
Or with data attributes:
<html data-theme='halloween'>
...
</html>
Themes can be switched dynamically with some toggle button or whatever you prefer