Why are CSS classes missing in production when using Tailwind and Next.js ?

Tailwind CSS is a popular utility-first CSS framework that helps developers to create consistent, responsive, and fast websites. It provides a wide range of pre-defined classes that can be used to style HTML elements without writing custom CSS.

Next.js, on the other hand, is a popular React framework that allows developers to build server-side rendered React applications. It comes with several features that improve the performance and user experience of websites, such as static site generation, automatic code splitting, and optimized asset loading.

While Tailwind and Next.js are powerful tools, they can sometimes cause issues when used together. One common issue is missing CSS classes in production, where some Tailwind classes are not included in the final CSS file, resulting in inconsistent website styles across environments.

In this article, we will discuss the possible causes of missing CSS classes in production when using Tailwind and Next.js, and how to fix this issue.

Possible Causes of Missing CSS Classes: The following are the possible causes of missing CSS classes when using Tailwind with Next.js:

• PurgeCSS: PurgeCSS is a tool that removes unused CSS classes from the final CSS file to reduce its size. By default, Next.js uses PurgeCSS to optimize the production build, which may remove some Tailwind classes that are not used in the project. This can cause missing some of the CSS classes in production.
• CSS Modules: Next.js supports CSS Modules, which allows developers to scope CSS styles to individual components. This can cause issues with Tailwind classes, as they are not scoped to individual components and may not be available in all files.

Fixing Missing CSS Classes: There are two approaches that are going to see to fix the missed CSS classes in production when using Tailwind and Next.js:

1. Enable JIT Mode: Just-in-Time (JIT) mode is a new feature in Tailwind 2.1+ that compiles CSS on the fly as you write it, allowing you to use all Tailwind classes without worrying about missing classes in production. To enable JIT mode, add the mode property to your tailwind.config.js file and set its value to “jit”. Here’s an example:

Javascript

/* tailwind.config.js */
module.exports = {
      mode: 'jit',
      purge: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}'
    ],
      theme: {
        extend: {},
      },
      variants: {},
      plugins: [],
}

With JIT mode enabled, Tailwind will include all classes in the final CSS file, even if they are not used in the project.

2. Use the @layer Directive: The @layer directive is a new feature in Tailwind 2.1+ that allows you to define classes in a specific layer, ensuring that they are available in all files. To use the @layer directive, define your classes within the components layer, as shown below:

CSS

/* styles.css */
@layer components {
      .button {
        @apply px-4 py-2 rounded-md bg-blue-500 text-white;
      }
}

By defining the .button class within the components layer, we ensure that it is available in all files and that all of its corresponding Tailwind classes are included in the production CSS file.

Examples: Here are two examples that illustrate how to fix missing CSS classes in production when using Tailwind and Next.js:

Example 1: Missing Classes Due to PurgeCSS: Suppose you have a button component in your project that uses the bg-yellow-500 class from Tailwind:

Javascript

/* button.js */
import React from 'react';

const Button = () => {
      return (
        <button className="px-4 py-2
            rounded-md bg-yellow-500 text-white">
              Click Me!
        </button>
      );
};

export default Button;

When you build the project for production using yarn build, you notice that the bg-yellow-500 class is missing from the final CSS file, resulting in a plain white button in the production environment.

To fix this issue, you can enable JIT mode in Tailwind by adding the mode property to your tailwind.config.js file and setting its value to “jit”. Here’s how:

• Open your tailwind.config.js file.
• Add the mode property and set its value to “jit”:

Javascript

/* tailwind.config.js */
module.exports = {
      mode: 'jit',
      purge: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}'
    ],
      theme: {
        extend: {},
      },
      variants: {},
      plugins: [],
}

Save the file and rebuild the project using yarn build.

With JIT mode enabled, Tailwind includes all classes in the final CSS file, even if they are not used in the project. This ensures that the bg-yellow-500 class is included in the production CSS file and that the button component looks consistent across all environments.

Example 2: Missing Classes Due to CSS Modules: Suppose you have a button component in your project that uses the bg-red-500 class from Tailwind:

CSS

/* button.module.css */
.button {
  @apply px-4 py-2 rounded-md bg-red-500 text-white;
}

When you build the project for production using yarn build, you notice that the bg-red-500 class is missing from the final CSS file, resulting in a plain white button in the production environment.

To fix this issue, you can use the @layer directive in Tailwind to define your classes in a specific layer, ensuring that they are available in all files. Here’s how:

1. Create a new CSS file and define your classes using the @layer directive:

CSS

/* styles.css */
@layer components {
      .button {
        @apply px-4 py-2 rounded-md bg-red-500 text-white;
      }
}

2. Import the CSS file in your button component:

Javascript

/* button.js */
import React from 'react';
import styles from './styles.module.css';

const Button = () => {
      return (
        <button className={styles.button}>
              Click Me!
        </button>
      );
};

export default Button;

3. Save the files and rebuild the project using yarn build.

By defining the .button class within the components layer, we ensure that it is available in all files and that all of its corresponding Tailwind classes are included in the production CSS file. This ensures that the button component looks consistent across all environments, even when using CSS Modules.

Conclusion: In this article, we discussed the possible causes of missing CSS classes in production when using Tailwind and Next.js, and how to fix this issue. We learned that enabling JIT mode in Tailwind or using the @layer directive can help ensure that all Tailwind classes are included in the final CSS file, resulting in consistent website styles across environments. As with any framework or tool, it’s important to understand the quirks and best practices for using Tailwind with Next.js. By following these tips and troubleshooting techniques, you can ensure that your website looks great and functions properly in all environments.