Reputation: 115

NextJS - Not Able To Use Custom Colors In Tailwind CSS In

I'm trying to use NextJs with Tailwinds CSS to make a project. However, whenever I try to use a custom color for the background color it throws this error:

Failed to compile
./styles/globals.css:7:12
Syntax error: /Users/anishkunapareddy/Desktop/Projects/React/hulu-clone/styles/globals.css The `bg-[#06202A]` class does not exist. If you're sure that `bg-[#06202A]` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  5 | @layer base {
  6 |   body {
> 7 |     @apply bg-[#06202A] text-gray-300;
    |            ^
  8 |   }
  9 | }

Code

index.js

import Head from "next/head";
import Image from "next/image";
import Header from "../components/Header";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Hulu 2.0</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      {/* Header */}
      <Header />

      {/* Nav */}

      {/* Results */}
    </div>
  );
}

tailwind.config.js

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

globals.css

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

System Info:

OS: macOS BigSur 11.3 Node Version: 16.2.0

Upvotes: 2

Answers (4)

Lojith Vinsuka

Reputation: 1051

When working with Tailwind CSS, it's important to ensure that your tailwind.config.js file includes folder paths that are relevant to your project. This can help to avoid issues with class compilation during the build process.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/views/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
    },
  },
  plugins: [],
}

In my case,

  './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
  './src/components/**/*.{js,ts,jsx,tsx,mdx}',
  './src/app/**/*.{js,ts,jsx,tsx,mdx}',

these folder paths were added by default. I had to add './src/views/**/*.{js,ts,jsx,tsx,mdx}', path of views folder as well. Otherwise tailwind cannot compile tailwind classes inside the views folder.

I hope this will be helpful :)

Upvotes: 0

Sommer Bareen

Reputation: 41

Faced this issue in VsCode and came up with this solution

Tailwind 2.2.16 with NextJs 12.0.4

Add the following to tailwind.config.js

module.exports = {
  mode: 'jit'
}

Add the following file in your project css_custom_data.json and paste code below

    {
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
    {
      "name": "@apply",
      "description": "Use @apply to inline any existing utility classes into your own custom CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
        }
      ]
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ]
    },
    {
      "name": "@screen",
      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
        }
      ]
    },
    {
      "name": "@variants",
      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
        }
      ]
    }
  ]
}

Go to settings.json in vscode (cmd+,) and add the following rule

 "css.customData": ["./css_custom_data.json"]

Upvotes: 0

person_v1.32

Reputation: 3167

In order to use the arbitrary value syntax (with the square brackets), you need to enable JIT mode and ensure you are on Tailwind 2.1 or greater. This will compile the CSS on-demand, which allows you to use the square bracket syntax and "break out" of your design system.

See the Tailwind docs for more info on JIT mode.

To enable JIT mode:

// tailwind.config.js
module.exports = {
  mode: 'jit', // add this
  purge: [
  // ...
  ],
  theme: {
    // ...
  }
  // ...
}

Upvotes: 5

Andrew Ross

Reputation: 1158

inside of extended theme, you can call custom colors and/or variables directly -- UPDATE -- included my entire tailwind.config.js file tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    mode: 'jit',
    important: true,
    purge: {
        content: [
            './components/**/*.{js,ts,jsx,tsx}',
            './pages/**/*.{js,ts,jsx,tsx}'
        ],
        options: {
            safelist: {
                standard: ['outline-none']
            }
        }
    },
    darkMode: 'class',
    theme: {
        extend: {
            zIndex: {
                '-10': '-10',
                100: '100',
                150: '150'
            },
            maxWidth: {
                '9xl': '121rem', // 1936px
                '8xl': '96rem' // 1536px
            },
            screens: {
                xs: '375px',
                sm: '640px',
                md: '768px',
                lg: '1024px',
                xl: '1280px',
                '2xl': '1440px',
                '3xl': '1920px'
            },
            transitionDuration: {
                0: '0ms',
                300: '300ms',
                500: '500ms',
                700: '700ms',
                1000: '1000ms'
            },
            rotate: {
                0: '0deg',
                45: '45deg',
                90: '90deg',
                125: '125deg',
                180: '180deg',
                270: '270deg',
                360: '360deg'
            },
            fontFamily: {
                header: ['goudy-bookletter-1911', 'serif'],
                heady: ['p22-marcel-script-pro', 'sans-serif'],
                poppins: ['poppins', 'sans-serif'],
                somaRoman: ['neue-haas-grotesk-text', 'sans-serif'],
                somaDisplay: ['neue-haas-grotesk-display', 'sans-serif'],
                sans: ['Inter', ...defaultTheme.fontFamily.sans]
            },
            colors: {
                'reddit-0': 'var(--reddit-0)',
                'reddit-1': 'var(--reddit-1)',
                'reddit-2': 'var(--reddit-2)',
                'reddit-3': 'var(--reddit-3)',
                'reddit-4': 'var(--reddit-4)',
                'primary-0': 'var(--primary-0)',
                'primary-1': 'var(--primary-1)',
                'primary-2': 'var(--primary-2)',
                'primary-3': 'var(--primary-3)',
                'primary-4': 'var(--primary-4)',
                'primary-5': 'var(--primary-5)',
                'primary-6': 'var(--primary-6)',
                'primary-7': 'var(--primary-7)',
                'primary-8': 'var(--primary-8)',
                'primary-9': 'var(--primary-9)',
                'secondary-0': 'var(--secondary-0)',
                'secondary-1': 'var(--secondary-1)',
                'secondary-2': 'var(--secondary-2)',
                'secondary-3': 'var(--secondary-3)',
                'secondary-4': 'var(--secondary-4)',
                'secondary-5': 'var(--secondary-5)',
                'secondary-6': 'var(--secondary-6)',
                'secondary-7': 'var(--secondary-7)',
                'secondary-8': 'var(--secondary-8)',
                'secondary-9': 'var(--secondary-9)',
                'secondary-10': 'var(--secondary-10)',
                'accents-0': 'var(--accents-0)',
                'accents-1': 'var(--accents-1)',
                'accents-2': 'var(--accents-2)',
                'accents-3': 'var(--accents-3)',
                'accents-4': 'var(--accents-4)',
                'accents-5': 'var(--accents-5)',
                'accents-6': 'var(--accents-6)',
                'accents-7': 'var(--accents-7)',
                'accents-8': 'var(--accents-8)',
                'accents-9': 'var(--accents-9)',
                'theme-0': 'var(--theme-0)',
                'theme-1': 'var(--theme-1)',
                lightBlue: {
                    0: '#E3F8FF',
                    100: '#B3ECFF',
                    200: '#81DEFD',
                    300: '#5ED0FA',
                    400: '#40C3F7',
                    500: '#2BB0ED',
                    600: '#1992D4',
                    700: '#127FBF',
                    800: '#0B69A3',
                    900: '#035388'
                },
                cyan: {
                    0: '#E0FCFF',
                    100: '#BEF8FD',
                    200: '#87EAF2',
                    300: '#54D1DB',
                    400: '#38BEC9',
                    500: '#2CB1BC',
                    600: '#14919B',
                    700: '#0E7C86',
                    800: '#0A6C74',
                    900: '#044E54'
                },
                rojo: {
                    0: '#610316',
                    100: '#8A041A',
                    200: '#AB091E',
                    300: '#CF1124',
                    400: '#E12D39',
                    500: '#EF4E4E',
                    600: '#F86A6A',
                    700: '#FF9B9B',
                    800: '#FFBDBD',
                    900: '#FFE3E3'
                },
                rosado: {
                    0: '#620042',
                    100: '#870557',
                    200: '#A30664',
                    300: '#BC0A6F',
                    400: '#DA127D',
                    500: '#E8368F',
                    600: '#F364A2',
                    700: '#FF8CBA',
                    800: '#FFB8D2',
                    900: '#FFE3EC'
                },
                amarillo: {
                    0: 'hsl(15, 86%, 30%)',
                    100: 'hsl(22, 82%, 39%)',
                    200: 'hsl(29, 80%, 44%)',
                    300: 'hsl(36, 77%, 49%)',
                    400: 'hsl(42, 87%, 55%)',
                    500: 'hsl(44, 92%, 63%)',
                    600: 'hsl(48, 94%, 68%)',
                    700: 'hsl(48, 95%, 76%)',
                    800: 'hsl(48, 100%, 88%)',
                    900: 'hsl(49, 100%, 96%)'
                },
                verdeAzulado: {
                    // blueish-green === teal (espanol)
                    0: 'hsl(170, 97%, 15%)',
                    100: 'hsl(168, 80%, 23%)',
                    200: 'hsl(166, 72%, 28%)',
                    300: 'hsl(164, 71%, 34%)',
                    400: 'hsl(162, 63%, 41%)',
                    500: 'hsl(160, 51%, 49%)',
                    600: 'hsl(158, 58%, 62%)',
                    700: 'hsl(156, 73%, 74%)',
                    800: 'hsl(154, 75%, 87%)',
                    900: 'hsl(152, 68%, 96%)'
                },
                olive: {
                    50: '#faf9f3',
                    100: '#f8efbb',
                    200: '#efdd80',
                    300: '#d7be69',
                    400: '#b3912a',
                    500: '#937215',
                    600: '#77590e',
                    700: '#5b430d',
                    800: '#3e2e0b',
                    900: '#2a1d09'
                },
                asparagus: {
                    50: '#f9f9f2',
                    100: '#f5efc4',
                    200: '#e7e08c',
                    300: '#c7bf58',
                    400: '#959831',
                    500: '#737a19',
                    600: '#5c6110',
                    700: '#48490f',
                    800: '#31320d',
                    900: '#211f0a'
                },
                seagreen: {
                    50: '#f3f6f4',
                    100: '#dfefeb',
                    200: '#b8e4d3',
                    300: '#81c8a8',
                    400: '#3fa779',
                    500: '#2c8b52',
                    600: '#26733c',
                    700: '#215831',
                    800: '#183c26',
                    900: '#11251c'
                },
                pine: {
                    50: '#f0f6f6',
                    100: '#d4eff4',
                    200: '#a4e4e8',
                    300: '#6cc8cb',
                    400: '#31a8a8',
                    500: '#238c85',
                    600: '#1f736b',
                    700: '#1c5854',
                    800: '#153c3d',
                    900: '#0e262c'
                },
                steel: {
                    50: '#f3f8f8',
                    100: '#dcf0f9',
                    200: '#b4e0f2',
                    300: '#82c1e0',
                    400: '#4c9dc9',
                    500: '#397db2',
                    600: '#306399',
                    700: '#284b78',
                    800: '#1d3356',
                    900: '#122039'
                },
                denim: {
                    50: '#f5f9fa',
                    100: '#e2f0fb',
                    200: '#c2dbf7',
                    300: '#96baea',
                    400: '#6994db',
                    500: '#5371cc',
                    600: '#4456b8',
                    700: '#364095',
                    800: '#262c6b',
                    900: '#161c44'
                },
                royalblue: {
                    50: '#f8fafa',
                    100: '#eceffa',
                    200: '#d9d6f6',
                    300: '#b8b1e9',
                    400: '#9c88da',
                    500: '#8364cd',
                    600: '#6c48b7',
                    700: '#523693',
                    800: '#382568',
                    900: '#20183e'
                },
                orchid: {
                    50: '#fafafa',
                    100: '#f3eff8',
                    200: '#e7d4f1',
                    300: '#ceacdf',
                    400: '#bc81c9',
                    500: '#a55db6',
                    600: '#8a429b',
                    700: '#683177',
                    800: '#482250',
                    900: '#2a162e'
                },
                blush: {
                    50: '#fcfbfa',
                    100: '#f9efed',
                    200: '#f4d2da',
                    300: '#e5a8b5',
                    400: '#dc7a8d',
                    500: '#ca576c',
                    600: '#b03c4e',
                    700: '#892d3a',
                    800: '#601f27',
                    900: '#3b1416'
                },
                chocolate: {
                    50: '#fcfbf8',
                    100: '#faefdb',
                    200: '#f4d6b5',
                    300: '#e5ad83',
                    400: '#d78056',
                    500: '#c15f35',
                    600: '#a54423',
                    700: '#7f331c',
                    800: '#592315',
                    900: '#38160e'
                },
                redditRed: '#FF4500',
                redditNav: '#1A1A1B',
                redditSearch: '#272729',
                redditBG: '#141415'
            },
            keyframes: {
                wiggle: {
                    '0%, 100%': { transform: 'rotate(-3deg)' },
                    '50%': { transform: 'rotate(3deg)' }
                },
                hero: {
                    transform: 'translate3d(0px, 0px, 0px)'
                }
            },
            animation: {
                wiggle: 'wiggle 10s ease-in-out infinite',
                hero: 'hero 1s ease-in-out infinite',
                slowPing: 'pulse 10s cubic-bezier(0, 0, 0.2, 1) infinite'
            },
            width: {
                82: '20.5rem',
                100: '25rem',
                200: '50rem',
                '8xl': '96rem'
            },
            height: {
                75: '75vh'
            },
            spacing: {
                7: '1.75rem',
                14: '3.5rem',
                18: '4.5rem',
                25: '6.25rem',
                26: '6.5rem',
                28: '7rem',
                44: '11rem',
                82: '20.5rem',
                100: '25rem',
                104: '26rem',
                156: '39rem'
            },
            boxShadow: {
                'outline-2': '0 0 0 2px var(--accents-0)',
                'outline-normal': '0 0 0 2px var(--accents-2)',
                magical:
                    'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
                cardHover:
                    '0 4px 4.1px rgba(0, 0, 0, 0.012),0 4.9px 5.8px rgba(0, 0, 0, 0.018),0 6.3px 8.4px rgba(0, 0, 0, 0.029),0 8.8px 12.9px rgba(0, 0, 0, 0.05),0 15px 23px rgba(0, 0, 0, 0.11)'
            },
            lineHeight: {
                'extra-loose': '2.2'
            },
            scale: {
                120: '1.2'
            },
            // https://tailwindcss.com/docs/font-size#providing-a-default-letter-spacing
            fontSize: {
                xxs: [
                    '0.50rem',
                    {
                        lineHeight: '0.75rem'
                    }
                ]
            }
        },
        variants: {
            padding: [
                'responsive',
                'group-hover',
                'hover',
                'focus',
                'even',
                'odd',
                'first',
                'last'
            ],
            textColor: [
                'responsive',
                'group-hover',
                'hover',
                'focus',
                'even',
                'first',
                'last',
                'odd'
            ],
            backgroundColor: [
                'responsive',
                'group-hover',
                'hover',
                'focus',
                'even',
                'first',
                'last',
                'odd'
            ],
            display: ['responsive', 'hover', 'group-hover'],
            visibility: ['responsive', 'hover', 'group-hover'],
            transitionDuration: ['responsive', 'hover', 'group-hover'],
            transitionTimingFunction: [
                'responsive',
                'hover',
                'focus',
                'group-hover'
            ],
            gridColumn: ['responsive', 'hover', 'first', 'odd', 'even'],
            extend: {
                filter: ['responsive', 'hover', 'focus'],
                ringWidth: [
                    'responsive',
                    'hover',
                    'active',
                    'focus',
                    'group-hover'
                ],
                ringColor: [
                    'responsive',
                    'hover',
                    'active',
                    'focus',
                    'group-hover'
                ],
                fontSize: ['responsive', 'last', 'first', 'hover', 'focus'],
                stroke: ['responsive', 'hover', 'focus', 'group-hover'],
                fill: ['responsive', 'hover', 'focus', 'group-hover'],
                gridTemplateColumns: [
                    'responsive',
                    'last',
                    'first',
                    'hover',
                    'focus'
                ],
                animation: [
                    'responsive',
                    'hover',
                    'focus',
                    'group-hover',
                    'motion-safe',
                    'motion-reduce'
                ],
                transitionProperty: [
                    'responsive',
                    'hover',
                    'focus',
                    'motion-safe',
                    'motion-reduce'
                ],

                transitionDelay: ['responsive', 'hover', 'focus'],
                scale: [
                    'responsive',
                    'hover',
                    'focus',
                    'active',
                    'group-hover'
                ],
                rotate: [
                    'responsive',
                    'hover',
                    'focus',
                    'active',
                    'group-hover'
                ]
            }
        }
    },
    plugins: [
        require('tailwindcss-line-clamp'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio')
    ]
};

Then, in your base layer you set any variables defined in tailwind.config.js to their corresponding hex/rgb/hsl values. Once you import the base layer into the root file of your app (_app.js if using nextjs with a custom app, else index.js), it will work globally

The non-variable colors such as text-olive-300 will display a color widget next to them whereas the css variables such as text-secondary-0 will not.

./styles/base.css

@layer base {
    #__next {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    :root {
        --reddit-0: hsl(240, 2%, 8%);
        --reddit-1: hsl(240, 2%, 10%);
        --reddit-2: hsl(240, 3%, 16%);
        --reddit-3: hsl(16, 100%, 50%);
        --primary-0: hsl(209, 61%, 16%);
        --primary-1: hsl(211, 39%, 23%);
        --primary-2: hsl(209, 34%, 30%);
        --primary-3: hsl(209, 28%, 39%);
        --primary-4: hsl(210, 22%, 49%);
        --primary-5: hsl(209, 23%, 60%);
        --primary-6: hsl(211, 27%, 70%);
        --primary-7: hsl(210, 31%, 80%);
        --primary-8: hsl(212, 33%, 89%);
        --primary-9: hsl(210, 36%, 96%);
        --secondary-0: #d7be69;
        --secondary-1: #486581;
        --secondary-2: #9fb3c8;
        --accents-0: hsl(195, 7%, 11%);
        --accents-1: hsl(140, 2%, 26%);
        --accents-2: hsl(0, 0%, 49%);
        --accents-3: hsl(0, 0%, 64%);
        --accents-4: hsl(0, 1%, 81%);
        --accents-5: hsl(0, 0%, 89%);
        --accents-6: hsl(50, 21%, 95%);
        --theme-0: hsl(210, 24%, 84%);
        --theme-1: hsl(209, 28%, 39%);
        @apply overflow-x-hidden;
    }

    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }

    /* Remove Safari input shadow on mobile */
    textarea,
    input:matches([type='email'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='url']) {
        -webkit-appearance: none;
    }

    html {
        height: 100%;
        box-sizing: border-box;
        touch-action: manipulation;
        font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -webkit-tap-highlight-color: transparent;
        -moz-osx-font-smoothing: grayscale;
        scroll-behavior: smooth;
        /* -webkit-text-size-adjust: none; */
        /* text-size-adjust: none; */
    }

    html,
    body {
        font-family: var(--font-sans);
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-color: var(--reddit-0);
        color: var(--text-accents-6);
    }

    body {
        position: relative;
        min-height: 100%;
        margin: 0;
        scrollbar-width: 10px;
        scrollbar-color: var(--secondary-0) var(--accents-7); /* scroll thumb and track */
    }

    body::-webkit-scrollbar {
        display: thin; /* Hide scrollbar for Chrome, Safari and Opera https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp */
        width: 10px;
    }

    body::-webkit-scrollbar-track {
        background: var(--accents-7); /* color of the tracking area */
    }

    body::-webkit-scrollbar-thumb {
        background-color: var(
            --secondary-0
        ); /* color of the scroll thumb */
        border-radius: 0px; /* roundness of the scroll thumb */
        border: 3px var(--secondary-0); /* creates padding around scroll thumb */
    }

    a {
        -webkit-tap-highlight-color: hsla(0, 0%, 0%, 0);
    }

    img {
        /* Don't apply styles to next/image */
        @apply m-0;
        &.prose {
            @apply m-0;
        }
    }

    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .fadeIn {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
    }

    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
}

I separate the contents of each layer into individual css files within a styles directory then import them all into an index.css file which is imported into the root of my projects

./styles/components.css

@layer components {
    .fit {
        min-height: calc(100vh - 88px);
    }
}

./styles/utilities.css

@layer utilities {
    #tsparticles {
        position: relative;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin: 0;
    }

    #map {
        height: 100%;
    }

    .skeleton {
        display: block;
        width: 100%;
        border-radius: 5px;

        background-image: linear-gradient(
            270deg,
            var(--reddit-0),
            var(--reddit-2),
            var(--reddit-2),
            var(--reddit-0)
        );
        background-size: 400% 100%;
        animation: loading 8s ease-in-out infinite;
    }

    @keyframes loading {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }

    .landing-page-pagination-btn {
        @apply m-3 relative inline-flex items-center px-4 py-2 border border-olive-300 text-sm font-medium rounded-md text-olive-300 bg-redditBG hover:bg-redditSearch;
    }

    .tooltip {
        @apply invisible absolute transition-transform ease-in-out transform-gpu;
    }

    .has-tooltip:hover .tooltip {
        @apply visible z-50 border-collapse rounded-lg bg-opacity-75 translate-x-3 -mt-2 text-xxs bg-redditBG text-opacity-0 my-auto p-2;
    }
}

./styles/index.css

@import 'tailwindcss/base';
@import './base.css';

@import 'tailwindcss/components';
@import './components.css';

@import 'tailwindcss/utilities';
@import './utilities.css';

Then import ./styles/index.css into the root of your app

As for the postcss config required for this kind of setup, here are the contents of postcss.config.js

module.exports = {
    plugins: [
        'postcss-import',
        'tailwindcss',
        'postcss-nesting',
        'postcss-flexbugs-fixes',
        [
            'postcss-preset-env',
            {
                autoprefixer: {
                    flexbox: 'no-2009'
                },
                stage: 3,
                features: {
                    'custom-properties': false,
                    'nesting-rules': true
                }
            }
        ]
    ]
};

Upvotes: 3