Tailwind Styles Not Working in Production with Next.js

Tailwind CSS is a popular utility-first CSS framework that provides a wide range of pre-designed styles to accelerate web development. When working with Next.js, a powerful React framework, it’s common to encounter issues where certain Tailwind styles appear to work fine during development but fail to render correctly in a production environment. In this article, we will explore the causes of this issue and discuss approaches to resolve it effectively.

Syntax:

To use Tailwind CSS in Next.js, ensure that you have installed the required dependencies by running the following command:

npm install tailwindcss postcss autoprefixer

Next, create a `postcss.config.js` file in your project’s root directory with the following content:

Javascript

module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
}

Include the Tailwind CSS styles in your project by importing the CSS file in your entry point file (such as `styles/globals.css`) as follows:

import 'tailwindcss/tailwind.css'

Approaches

1. PurgeCSS Configuration

One common cause of missing Tailwind styles in production is the misconfiguration of PurgeCSS, which is responsible for removing unused CSS. By default, PurgeCSS scans only specific directories, so if your project structure deviates from the default, some styles might be erroneously removed. To address this issue, you can customize the PurgeCSS configuration in the `tailwind.config.js` file by adding the appropriate paths to the `content` property.

2. Classname Mangling

Another potential issue arises when classnames get mangled during the build process, causing the styles to be mismatched or not applied at all. To resolve this, ensure that your Next.js configuration does not interfere with the generated classnames by using options like `enableBabelRuntime` and `optimizeCss`.

Let’s consider two common scenarios where Tailwind styles might fail to work in production with Next.js:

Example 1: Missing Styles due to PurgeCSS Misconfiguration

Suppose you have a custom component called `Button` that uses Tailwind CSS classes. However, in production, the styles are not applied to the button.

To fix this issue, modify your `tailwind.config.js` file as follows:

Javascript

module.exports = {

    // Include all relevant paths
      purge: ['./src/**/*.{js,ts,jsx,tsx}'],
      // Rest of the configuration
}

Example 2: Classname Mismatch

Suppose you have a Next.js project where some Tailwind styles are not working as expected in production. After investigating, you realize that the classnames generated during the build process are being mangled.

To resolve this issue, ensure that you have the following configuration in your `next.config.js` file:

Javascript

module.exports = {
  optimizeCss: false,
  enableBabelRuntime: true,
  // Rest of the configuration
}

Javascript

// Example component using Tailwind CSS styles
import React from 'react';

const Button = () => {
    return (
        <button className="bg-blue-500
            hover:bg-blue-700 text-white
            font-bold py-2 px-4 rounded">
            Click me
        </button>
    );
};

export default Button;

Output:

Output

Conclusion

In this article, we discussed the common issue of Tailwind styles not working correctly in a Next.js production environment. We explored two potential causes: PurgeCSS misconfiguration and classname mangling. By customizing PurgeCSS configuration and ensuring proper Next.js configuration, we can resolve these issues and ensure that Tailwind styles are consistently applied in production.

Remember that it’s essential to thoroughly test your application in a production environment after making changes to confirm that all styles are rendering correctly. By understanding these potential issues and following the suggested approaches, you can ensure seamless integration of Tailwind CSS with Next.js, providing an enhanced user experience with stunning designs.