tailwind css
In the ground since Fri Oct 01 2021
Last watered inFri Oct 01 2021
Related Topics
Hover Child Elements
Grouping multiple classes into a single custom class
This is useful when you have a set of classes that you use together frequently and you wanna use Tailwind's breakpoints like md:something, lg:something-else, etc.
your-global-css-file.css
Customizing
Colors
We can create a custom palette and use them as if they were made by Tailwind itself.
tailwind.config.ts
- If we wanna use CSS Variables // TODO
Fonts
- Add a font to the project
- !If you're hosting the font:
your-global-css-file.css
- If you're using from Google Fonts
- If you're using Next JS
- Add the font to layout.tsx file at the root level
- Add the font to the tailwind.config.js file
- Use the font in the project
Breakppoints
- Changing Default breakpoints values, not their names
- Changing breakpoints names
Glass Effect - Glassmorphism
- backdrop-filter
- backdrop-blur-md
- bg-opacity-10
Referencing Tailwind on Typescript or Javascript
https://tailwindcss.com/docs/configuration#referencing-in-java-script
Referencing Tailwind on CSS
Using a Tailwind Custom Color inside a CSS File
ps. theme() is globally availableParallelism, no need to import it
Using CSS Varibles for Colors
Enable the advantage of using the opacity utility
If we want Custom Colors, via CSS Variables we need to set the values of a varible following two steps:
globals.css
tailwind.config.ts
Problem when using Motion
