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.
Related
I've created a web component using Vue2 & Vuetify2 and it's working almost flawlessly bar a few websites where there are CSS clashes.
The problem is that the web component is not in a shadowDOM and as much as I've tried getting this to work, it just doesn't (seems the issue lies with Vuetify + shadowDOM).
As an alternative, would it be possible to change or prepend to class names to stop CSS conflicts?
For example row is a typically used class name. Would it be possible to prepend either widget, .widget or #widget to all other classes & id's?
Demo of the widget.
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;
}
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
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.
I want to apply different colors to a few font-awesome icons inside an A tag. However, the CSS class seems not to be applied? I want grey (inactive icon) and yellow (active icon), but I get blue (active icon) and black (inactive icon) which I assume is Bootstrap defaults.
Visit https://jsfiddle.net/q1um77ax/1/ for a fiddle
NOTE:
The colors must be applied using classes as I am making dynamics theme features to my site and the same class tag is in several CSS files with different colors depending on the theme.
You didn't use the appropriate classes, use this for example:
.themeIconStatusInactive {color:red;}
It works!
You have used wrong css class name: .themeIconStatusActive
check it here: jsfiddle.net/q1um77ax/1/
You have used different classes on the Icons, that's why you didn't get the css applied! replace themeIconStatusActive with iconIndicatorActive for example and it will work!
Turns it out is was a cache issue. The old CSS was still cached in the browser. Duh. Thanks guys.