I use a tailwind class, which is only add with JS afterwards.
However, when I generate the css from tailwind this CSS class is of course not included. Therefore the question how I can add this class.
Tailwind allows to safelist classes:
https://tailwindcss.com/docs/content-configuration#safelisting-classes
Add the following to your tailwind.config.js:
safelist: [
'class-name-you-need-to-add'
]
The documentation also explains how to use regular expressions to safelist multiple classes.
You will need to configure Tailwind so that it will also scan your JS files that are adding these additional classes. This can be done by modifying tailwind.config.js file and add additional entries/glob patterns to the content array, as per documentation.
Under the hood Tailwind CSS uses regex to simply search for possible classname uses in JS files. This also means that you need to be mindful of how you're adding classes in JS. You cannot use dynamically composited class names, e.g. const className = 'px-' + SOME_NUMBER, because Tailwind CSS cannot guess the class name.
You can customize Tailwind CSS by changing lines under themes section in your tailwind.config.js file. About more details: Tailwind Custom Styles
Related
In my Angular[v13] project, I used #angular/material. I also want to use tailwindcss.
but #angular/materialcss is a style tag in head. so tailwindcss is not working.
Now i want to extract #angular/material css file. Or is there any way to solve this problem
To solve this issue, be sure to activate important flag on tailwindcss config, in order to automatically mark all css class with !important clause.
So every predefined classes of TailwindCSS will override #angular/material styles.
tailwind.config.js:
module.exports = {
...
important: true,
...
};
I have a component folder and two different components in it, every component has its own css file with the link in its jsx file.
:
when I use a the same class name in them it affects the other component too! While the other component has its own css file and link.
Why is that?
For example:
In both components I have a class named: "PlayerPhoto"
when I change its height and width, the photo in other components (with separate css file but the same class name) would change too!
It happens because your css is imported simply as normal css - without unique identificator. You need to specify classes with unique names or have a look at Css Modules which solve this problem and creating unique classes automatically
Or you can use libraries as EmotionJS or styled-components
Your app.js file may has the property for the className="PlayerPhoto", make sure that your app.css has not the same className if there were, then it overwrite your component base css.
You can also use inline css, to overcome this type of issues.
Angular cli automatically loads css files those are in node_module directory. I am using #swimlane/ngx-dnd and it has css style. But I want to use bootstrap styles for my components. What's standard way for doing this ?
Appreciate any idea and helps.
In your app.component.ts, add:
#Componenent({
encapsulation:ViewEncapsulation.None,
styleUrls:[''], // Add your bootstrap css files
templateUrl: ....
})
If you want to override a package's styles, you can just provide overrides in your own stylesheet or component stylesheet with the same or more specific style definition. Your definition will need to match their style, but must be loaded after their style and/or be more specific so that your style applies correctly.
If you want to exclude their style sheets you will need to use some sort of plugin for webpack to Ignore the css files in the package directory.
I'd recommend the first approach.
If the package you are using creates dynamic markup along with the styling, you may need to change your component encapsulation so that the component you are using can successfully apply your styles to the generated dom elements.
Is there any way available as part of Bootstrap4 scss based build to add prefix to each bootstrap class in css and js to avoid name collisions.
I have used https://github.com/faucamp/bootstrap_namespace_prefixer
But this only supports bootstrap3 based css and js files.
Assuming you make use of SCSS you can prefix the whole BS4 library like:
.myprefix {
#import '~bootstrap.scss';
}
Prefixing the javascript is a little harder. I have not tried this but it looks like you can specify the CONST variables in each js file to match your prefix:
https://github.com/twbs/bootstrap/blob/v4.5.0/js/src/button.js#L23-L25
After that create your own bootstrap index.js, define all variables there and import the classes you need. Or, create a plugin in your (webpack?) buildscript to dynamically replace all classes on build.
You would need to modify the bootstrap code directly, an example of how this could be achieved elegantly in less:
.prefixname {
&-row {
...
}
}
credit for #raygerrard in this question Add prefixes to CSS class names using LESS or SASS
I'm using react day picker in react webpack. I dont want to use css file. So, how could i use a less a file instead of css file. I'm adding hash tag to the class names using webpack.
I don't think this is related to react-day-picker. To use Less instead of CSS you need to use the less-loader in your webpack config: https://github.com/webpack-contrib/less-loader