In the ground since Fri Oct 01 2021
Last watered in Fri Oct 01 2021
Hover Child Elements
1 < div className = "group" >
2 < div className = "group-hover:opacity-100 opacity-0" > ... </ div >
3 </ div >
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
1 @layer utilities {
2 .global-spacing {
3 @apply global-x-spacing global-y-spacing;
4 }
5
6 .global-y-spacing {
7 @apply py-4;
8 }
9
10 .global-x-spacing {
11 @apply px-4;
12 }
13 }
Customizing
Colors
We can create a custom palette and use them as if they were made by Tailwind itself.
tailwind.config.ts
1 const config : Config = {
2 content: [....],
3 theme: {
4 extend: {
5 colors: {
6 primary: "#dbd1d1" ,
7 secondary: "#dbd1d1" ,
8 }
9 }
10 },
11 },
12 },
13 plugins : [],
14 };
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
1 @tailwind base;
2 @tailwind components;
3 @tailwind utilities;
4
5 @layer base {
6 @font-face {
7 font-family : "Roboto" ;
8 font-style : normal ;
9 font-weight : 400 ;
10 font-display : swap ;
11 src : url ( /fonts/Roboto.woff2 ) format ( "woff2" );
12 }
13 }
If you're using from Google Fonts
1 < link
2 rel = "stylesheet"
3 href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
4 />
If you're using Next JS
next/font can be used with Tailwind CSS through a CSS variable .
Add the font to layout.tsx file at the root level
1 const cormorant = Cormorant ({
2 subsets: [ "latin" ],
3 weight: [ "300" , "400" , "500" , "600" , "700" ],
4 variable: "--font-cormorant" ,
5 });
6
7 const openSans = Open_Sans ({
8 subsets: [ "latin" ],
9 weight: [ "300" , "400" , "500" , "600" , "700" ],
10 variable: "--font-open-sans" ,
11 });
12
13 export const metadata : Metadata = {
14 title: "Digital Garden - Mario Brusarosco" ,
15 description: "Digital Garden - Mario Brusarosco" ,
16 };
17
18 export default function RootLayout ({
19 children ,
20 }: Readonly <{
21 children : React . ReactNode ;
22 }>) {
23 return (
24 < html lang = "en" >
25 < body className = { ` ${ cormorant . className } ${ openSans . className } ` } >
26 { children }
27 </ body >
28 </ html >
29 );
30 }
Add the font to the tailwind.config.js file
1 module . exports = {
2 theme: {
3 extend: {
4 fontFamily: {
5 serif: [ "var(--font-cormorant)" , "serif" ],
6 sans: [ "var(--font-open-sans)" , "sans-serif" ],
7 },
8 },
9 },
10 };
Use the font in the project
1 < h1 className = "text-4xl pb-20 font-serif" ></ h1 >
2 < h2 className = "text-4xl pb-20 font-sans" ></ h2 >
Breakppoints
Changing Default breakpoints values, not their names
1 module . exports = {
2 theme: {
3 screens: {
4 sm: "640px" ,
5 md: "768px" ,
6 lg: "1024px" ,
7 xl: "1280px" ,
8 },
9 },
10 };
Changing breakpoints names
1 module . exports = {
2 theme: {
3 screens: {
4 tablet: "640px" ,
5 laptop: "1024px" ,
6 desktop: "1280px" ,
7 },
8 },
9 };
Glass Effect - Glassmorphism
backdrop-filter
backdrop-blur-md
bg-opacity-10
1 < footer
2 className = "fixed flex min-h-[116px] w-screen bottom-0 backdrop-filter
3 backdrop-blur-md
4 bg-opacity-10 desktop:bg-transparent m-w-[132px]"
5 >
6 < div className = "container flex-1 py-6 desktop:flex desktop:justify-start items-center" >
7 lorem ipsum
8 </ div >
9 </ footer >
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
1 .swiper-button-prev {
2 color : theme( "colors.primary-white" );
3 }
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
1 @layer base {
2 :root {
3 --red-700 : 187 34 83 ;
4 --blue-green : 0 17 44 ;
5 }
6 }
tailwind.config.ts
1 theme : {
2 extend : {
3 colors : {
4 "blue-green" : "rgb(var(--blue-green) / <alpha-value>)" ,
5 },
6 }
7 }
The synxta matter! We didn't declare the RGB values between quotes we split
them with isWhiteSpaceSingleLine. This is mandatory . Otherwise Tailwind
would't be able to this: bg-blue-green/10 to add opacity to the color. So
far this is the only way Tailwind works.
Problem when using Motion
1 We've declared the colors in this format: `--red-700: 187 34 83;`. Motion won't be able to work with this color and we'll face an error.
2
3 One solution is to set this CSS Variables during the Mount phase of the `App`.
4
5 `It wokrs! But a blink may occur for a tiny millisecond.`
6
7 ```tsx
8 export default function App({ Component, pageProps }: AppProps) {
9 useEffect(() => {
10 document.documentElement. style .setProperty(" --red-700 ", "187 34 83");
11 document.documentElement. style .setProperty(" --blue-green ", "0 17 44");
12 }, []);
13
14 return <Component {...pageProps} />;
15 }
