Tailwind Not loading all the classes in my NextJs 14 project

Question

I am using tailwind for my project. As i have created new application using Nextjs 14, Tailwind was installed while creating the project only. But i noticed that lot of the classes, for example gap-2, grid-cols-4 and more which are mentioned in the tailwind docs are not working. I have tried lots of things. I also did npx tailwindcss -i ./input.css -o ./output.css --watch and saw that classes like gap-2 are not in the output file, but gap-4 and gap-8 is there.

Here is my config file

const plugin = require('tailwindcss/plugin')
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'media',
  theme: {
    extend: {
      backgroundColor: {
        main: '#fad849',
        danger: '#f21515'
      },
      borderColor: {
        main: '#fad849'
      },
      colors: {
        main: '#fad849',
        danger: '#f21515'
      },
      animation: {
        'pulse': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      },
      keyframes: {
        pulse: {
          '0%, 100%': {  opacity: 1 },
          '50%': { opacity: 0 },
        }
      },
      letterSpacing:{
        wide:'.02em'
      },
      screens: {
        '3xl': '1800px',
        // => @media (min-width: 640px) { ... }
      },
    },
  },
  plugins: [
    require('tailwind-scrollbar-hide')
  ],
}

I tried deleting the .next folder and then re build but nothing worked. Also tried different configurations.

Answer 1

Unless you specifically know that you have used these classes anywhere, it works as intended. Tailwind compiles a CSS based on classes used in the project and may therefore only load the once that are in use. If you know you in fact have used any of these classes, I would recommend checking that the file path is read by tailwind config:

content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",

// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],

You may need to add other folders here.

If you add gap-2 anywhere within these file paths it should get picket up, and you can then see that it does in the output file. Have a great day!