Digital Garden - Mario Brusarosco

tailwind css

In the ground since Fri Oct 01 2021

Last watered inFri 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

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

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

1const cormorant = Cormorant({
2  subsets: ["latin"],
3  weight: ["300", "400", "500", "600", "700"],
4  variable: "--font-cormorant",
5});
6
7const openSans = Open_Sans({
8  subsets: ["latin"],
9  weight: ["300", "400", "500", "600", "700"],
10  variable: "--font-open-sans",
11});
12
13export const metadata: Metadata = {
14  title: "Digital Garden - Mario Brusarosco",
15  description: "Digital Garden - Mario Brusarosco",
16};
17
18export 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

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

Changing breakpoints names

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

Problem when using Motion

1We'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
3One 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
8export 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}

tailwind-motion-and-css-variables

tailwind css

Related Topics

Hover Child Elements

Grouping multiple classes into a single custom class

Customizing

Colors

Fonts

Breakppoints

Glass Effect - Glassmorphism

Referencing Tailwind on Typescript or Javascript

Referencing Tailwind on CSS

Using a Tailwind Custom Color inside a CSS File

Using CSS Varibles for Colors

Enable the advantage of using the opacity utility

Problem when using Motion

tailwind css

Related Topics

Hover Child Elements

Grouping multiple classes into a single custom class

Customizing

Colors

Fonts

Breakppoints

Glass Effect - Glassmorphism

Referencing Tailwind on Typescript or Javascript

Referencing Tailwind on CSS

Using a Tailwind Custom Color inside a CSS File

Using CSS Varibles for Colors

Enable the advantage of using the opacity utility

Problem when using Motion