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}

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};

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}

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};

1module.exports = {
2  theme: {
3    screens: {
4      sm: "640px",
5      md: "768px",
6      lg: "1024px",
7      xl: "1280px",
8    },
9  },
10};

1module.exports = {
2  theme: {
3    screens: {
4      tablet: "640px",
5      laptop: "1024px",
6      desktop: "1280px",
7    },
8  },
9};

1.swiper-button-prev {
2  color: theme("colors.primary-white");
3}

1@layer base {
2  :root {
3    --red-700: 187 34 83;
4    --blue-green: 0 17 44;
5  }
6}

1  theme: {
2    extend: {
3      colors: {
4        "blue-green": "rgb(var(--blue-green) / <alpha-value>)",
5      },
6    }
7  }

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}