within TailwindCSS you can specify such code:
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500></div>
So that the default color will be red, at the "sm" breakpoint it will be green and at the "md" breakpoint it will be blue.
You can assign any uitlity class to any breakpoint by prefixing it with the coresponding letters and a ":".
Does TailwindCSS simply generate every single utility class for/within every defined breakpoint?
Short answer
Yes, it generates everything as defined per the tailwind config file.
Longer answer
It generates all the classes as per the config. This is to make your development life easier, so you don't have to worry about which classes are defined and which aren't.
Now you probably don't want all of the classes tailwind provides in production environment, only the ones which you actually use. If you want to know more about how to control the file size and removing unused css, read the tailwind docs.
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.
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
I need to customize the color of the label for the Input field ( ant design ). but i couldn't change the color of it.
Inside the yellow box is the CSS I have added to the code but when I run and inspect the code (inside the red box) there is two .ant-form-item-label > label is there, the issue is the one I have added (inside the yellow box) is not working, other one (i think its the default one) is overwriting the one which I have written. how to overcome this
Hard to judge as no one will know how the project is set up. The correct way to overcome this is by checking the order of your scss imports, if your default login scss styles are located below your LoginStyles.scss then they will overwrite any of your sass styles. Simply move, shift your imports so that LoginStyles.scss is below defaults.scss i.e
#import 'default.scss';
#import 'LoginStyles.scss';
A dirty way to fix the issue is by assigning !important on your color but I would try getting your import order correct first as this stops messy conflicts
You can add !important rule. And there is no definition of that color in the files? The default label appearance can also be changed.
I am using Angular-material-6. I am using an angular-material stylesheet and my own custom less stylesheet as a master stylesheet. I have a select box in header which shows theme color name like Red, Green, Blue etc. Now my task is to change a less variable as per user choice theme.
for example, by default my application primary color is red and if a user changes it to blue from header select box then it will automatically change my primary variable color to red.
I tried simple way solution like CSS switching from index.html using javascript but I am not sure how to do it with less and less variables.
Thanks in advance.
Less can compile at run-time and is one of the few CSS processors (If not the only one) that can do this and modify CSS vars programmatically at run time.
Check out this SO post: How to use less in Angular component without CLI
Less is a CSS preprocessor which means that it produces CSS at compile-time, not runtime. Therefore you can't do what you are aiming to do.
You can have a look at css variables if you want to dynamically override it. You can also use a CSS in JS or make smart use of the CSS cascading model.
Should be relatively simple, by I can't quiet figure it out.
I have this:
.parent
#include grid-row()
.main
#include grid-column(8)
.sidebar
#include grid-column(4)
The elements 'main' and 'sidebar' end up sitting right next to each other with no gutter.
I can see in the grid docs that there is a variable called $column-gutter, and that it has a default setting. But I can't see it's effect.
In the file _grid.scss I can see $column-gutter. It has a default value, and I have touched it. But it has no effect on side-by-side elements in a row. These elements have no gutters.
So how do I make use of that variable, or otherwise set gutter widths?
You should set values of the configuration variables prior to importing Foundation.
See http://compass-style.org/help/tutorials/configurable-variables/ :
Many Compass modules use guarded assignment to allow you to set defaults for that module. In order for these configurable variables to work correctly, you must set the variables before you import the module. For example:
$blueprint-grid-columns = 12
#import "blueprint/grid"
Because of this, it is common to have one or more partials that set the constants first and get imported before any other imports in your stylesheet(s). This is commonly referred to as the "base" stylesheet and is usually named _base.scss
or _base.sass.
I had this same issue and in my case the problem was that I was never actually using the _settings.scss file. And since this was the case, none of my changes were being reflected on the site.
If this is the same for you, then what you need to do go to the screen.scss file, make sure its calling #import "app". Once this is confirmed, go to the app.scss file and at the top make sure you call #import "settings". Once you do this, the settings in the _settings.scss file should actually cause an affect on the gutter settings that you want to change.