TailwindCSS supports dark mode as a first-level feature.
To enable it with manual switching based on a class applied higher in the HTML DOM tree, you can update your config like
// tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}
Per the docs
Now instead of dark:{class} classes being applied based on prefers-color-scheme, they will be applied whenever dark class is present earlier in the HTML tree.
Is it possible to change what class name toggles this behavior? For instance, if I wanted the class to be called dark-mode instead of dark?
A reason for doing this would be if the class name that toggles dark mode is present in an application, but the name of that class is not controlled by the designer creating the styling.
The dark class seems to be hardcoded https://github.com/tailwindlabs/tailwindcss/blob/691ed02f6352da17048dd14f742f7c82919e1455/src/corePlugins.js#L290 so overwritting it isn't currently possible.
Related
I use ready-made Angular components in my project. Some of the components use colors (see picture) that don't fit my project.
Instead of the purple, I want to use another color. I couldn't find anything in the Angular documentation to change the color.
https://material.angular.io/components/input/overview
I also didn't see a property in Chrome's Inspecter Tool to change the color.
How can I use a different color instead of the purple?
It would be best if you only have to change it in one place, as I use many other Angular components.
If you check the CSS for the placeholder text in the browser inspector, you should see the associated CSS that you should be able to copy to your code and change. Below is what I copied when I went to https://material.angular.io/components/input/overview and inspected (and even changed). If you decided to add this CSS as is to your Angular app, be sure to change the encapsulation option to ViewEncapsulation.None to see the effect. This is if you're using Angular Material v15; otherwise, inspect and see the associated CSS.
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
color: orange;
}
I am using tailwind in a widget that in the end is attached to a shadow-dom node on different websites.
I am using TailwindCSSs class implementation of the dark mode ( darkMode: 'class') which unfortunately attaches a "dark" class to html-tag.
Is it possible to define different tag to attach the "dark" class to? I do not want to mess up the code of the websites I am adding my widget to.
Thanks :)
If you are using small amount of tailwind classes, try using a prefix. But you have to add prefix for every tailwind classes - such as tw-bg-black tw-text-white tw-font-bold etc.
So I have an array of colors
let colors=["red-500","blue-500","green-500","yellow-500","cyan-500","white-500","orange-500"]
and i wanna use a specific color depending on a number
<h1 className={`bg-${colors[index]}`}></h1>
the colors are not always applied as intended for example sometimes it always be red or white
has anyone encountered similar issues with tailwind css + react ?
Tailwind will only build styles for classes that it detects in your code—but it does not actually run your source code and won’t detect dynamically constructed class names. Therefore, you must include the complete class name in your strings.
The styles that are working (like red and white) are probably included elsewhere in your code, and make it into the build, while the others are not.
Don't construct class names dynamically
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
Always use complete class names
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Source: Dynamic class names - Tailwind CSS
While the answer from #quartzic is a perfectly acceptable, I'd like to present an alternative.
The missing styles is most likely caused by Tailwind purging all styles that it doesn't detect being used anywhere in your code. This purge functionality can be configured by defining a safelist - a list of classes that shouldn't be purged under any circumstances.
In your case, I'd add the background color classes you want to use, to the safelist and you wont have to change anything in your React component. This is done in the tailwind.config.js file:
module.exports = {
// ...
safelist: [
'bg-red-500',
'bg-blue-500',
'bg-green-500',
'bg-yellow-500',
'bg-cyan-500',
]
// ...
}
The downside is that it might increase your style bundle size, if your safelist includes classes that turned out to not be used anyways. In you case, this doesn't seem to be an issue though.
This safelist can even use regular expressions (although, I'd be vary of using that, as it might increase bundle size unexpectedly).
You can read more in the Tailwind documentation
im creating a vue app.
At the moment I have a light.scss and a dark.scss and decide in the build process which one I use.
But I want to toggle the dark mode directly in my app.
Im using a css theme and until now I could write:
light.scss
$header-bar-color: null;
dark.scss
$header-bar-color: black;
The light variant took the default value from my css theme.
Now I want to use only one main.scss with custom properties.
Therefore I have a light.scss with:
--header-bar-color: null
and a dark.scss with:
--header-bar-color: black
and in my main.scss I write:
$header-bar-color: var(--header-bar-color)
My Problem is that the null value from the light theme don't fallback to my default css theme. Is it possible to achieve this?
I'm using the Notes 9 extension library application layout control and I would like to use CSS to float the place bar actions on the left instead of the right.
Those actions are styled with the lotusBtnContainer class using a float:right property. How do I override that class with my own class that uses a float:left?
I can make the adjustment to the lotusBtnContainer class in firebug but I don't want to touch that class for obvious reasons.
Quick answer: cascading. If your stylesheet is below the stylesheet that defines lotusBtnContainer, then it will override the styles above it. You should be able to add a stylesheet to the page that contains the same definition. One caveat is that you must match the specificity of the lotusBtnContainer definition in the theme stylesheet. If the css definition is td.lotusBtnContainer then in order to override you must also use td.lotusBtnContainer, not just .lotusBtnContainer.
If you need any additional help with this, please add the definition of the lotusBtnContainer from the default css files and I can assist further.
Edit: Additionally, if this doesn't work, adding the class with the style you want like this should override:
.lotusBtnContainer{float:left !important;}