Mario Brusarosco

tailwind css

In the ground since Fri Oct 01 2021

Last watered inFri Oct 01 2021

Related Topics

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

1const 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

  1. 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
  1. 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}
  1. Add the font to the tailwind.config.js file
1module.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};
  1. 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

  1. Changing Default breakpoints values, not their names
1module.exports = {
2  theme: {
3    screens: {
4      sm: "640px",
5      md: "768px",
6      lg: "1024px",
7      xl: "1280px",
8    },
9  },
10};
  1. Changing breakpoints names
1module.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  }

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