I added Tailwind CSS to our company project. It's a 5-6 years old codebase and it's already using bootstrap CSS + custom bootstrap theme.
My tailwind JS config file looks like this:
tailwind.config.js
I have added a custom prefix in order to avoid class conflict and also applied !important to all of the tailwind classes.
And I need to override the specificity of those selectors.
How could I achieve this using tailwind CSS?
specific class selectors that need to be override
Please dont't post images of code, just use the code tags available in the editor!
What you could do is overwrite those selectors manually in your tailwind css file which i guess is loaded AFTER the bootstrap file?
The order of css evaluation is key here.
If both pieces of CSS have the same specificity (for example, they're both body{), then whichever gets called LAST will override the previous one. BUT, if something has higher specificity (a more specific selector), it will be used regardless of the order.
Related
Some Tailwind styles are not being applied.
In this image, you can see that two classes are added to this div, but these styles are not available in the DOM.
Help please.
I can see two possibilities: you're building classes dynamically in Javascript (hard to say without seeing your code), or you did not recompile your Tailwind classes.
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.
I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
I saved and am using the bootstrap css but it conflicts with my main css.
it has tags body, html, a, img, p... and my css loses configuration
how can I use the bootstrap css without colliding?
thank you
Try importing your custom CSS after Bootstrap CSS.
In CSS, the “!important” suffix was originally intended to provide a method of overriding author stylesheets. Users could define their own “user stylesheets” and could use this suffix to give their rules precedence over the author’s (website creator’s) styles.
Unfortunately, and quite predictably, its usage has spread massively, but not in the right direction. Nowadays, it’s used to counteract the pain of having to deal with CSS specificity, otherwise known as the set of rules which dictate that “div h1 a” is more specific selector than “div a”. Most people that use CSS on a daily basis don’t know enough about CSS specificity to solve their problems without using the “!important” suffix.
1.over ride those styles in your css file by using !important property. bootsrtap css either override or extend your css with bootstrap css so if you want to override entire css of some class best to use !important property.
2.if your are using script in your code so its very easy to differentiate the css styles.
Try combining into one CSS, multiple CSS slows down the sites.
Even, Bootstrap has its own body,html, etc tags. You have to edit them or delete/comment them. So it avoids conflicts.
Generally, the last CSS property will be applied, so if you put your body, html etc at the end of Bootstrap.css, that might work, but not recommended.
I have a web page, Page-A, that uses a primary css file. I have other pages, Page-B, that use another primary css file. I'd like to use two classes of the Page-B css file into Page-A, but I do not want to override other classes and functions of Page-A css with this Page-B css file.
Is it possible to import only two classes of a css file instead of all its classes. In other words, is it possible to constrain an #import or link to load only a few classes?
What you could do is mark the classes that will be overriding everything with the !important tag in CSS, which means that it will not be overridden.
I would just input the two classes you want into the Page-A css file, as there is unfortunately no way to just import certain classes.
I would suggest making one master CSS file and input into both pages, that way all of your changes are reflected on both pages.
No. It's not possible.
But: You can still prefix your CSS rules with a class or an ID. It can helps you work with specificity (http://bit.ly/1aODhdu) and with rule importance.
You can also prefix CSS rule which will be applied-only for some nodes like html.one div html.two div so after load second CSS file will be still ignored.
No, it is not possible to import specific classes from a CSS file.
The correct way to do this would be to create a master CSS file, which all your webpages can share.
Delete the classes you need from PageBs css(OPTIONAL), add them to a new CSS file.
Link the new file to both the pages.
This way you will not override any classes and have a CSS file which has all the shared classes both pages need.