Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

Question

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

It seems that there are some style issues occurring in the production build hosted on Netlify for a specific component. The problematic component is a wrapper located at ./layout/FormLayout.tsx. Below is the code for this wrapper:

const FormLayout: React.FC<FormLayout> = ({ children, title, description }) => {
    return (
        <div className="w-screen mt-32 flex flex-col items-center justify-center">
            <div className="p-6 flex flex-col items-center justify-center">
                <h2 className="text-4xl font-semibold text-blue-400">
                    {title}
                </h2>
                {description && (
                    <h6 className="mt-4 text-md font-medium">{description}</h6>
                )}
                <div className="mt-12 w-max">{children}</div>
            </div>
        </div>
    )
}

This wrapper is used in the following component:

const Register: React.FC<RegisterProps> = () => {
    return (
        <FormLayout title="Register" description="Register with your email.">
            {/* form stuff. styles do work in here */}
        </FormLayout>
    )
}

Below are some of the configuration files being used:

tailwind config:

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

postcss config:

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

An example demonstrating the issue can be seen in the following images:

The build command used is

next build && next export

, and Netlify deploys the directory /out.

You can find all the code here on GitHub

javascript css reactjs next.js tailwind-css

Answer 1

Answer №1

If you come across this message later on, simply update the Tailwind config by including the path to any new folder in the purge array like so:

module.exports = {
    purge: [
        "./src/**/*.{js,ts,jsx,tsx}",
        // Add more paths here
    ],
    darkMode: 'class',
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

December 2021 Update:

Post-TailwindCSS version 3, there's a slight change in the configuration file format. The updated setup would look like this:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // Include additional paths here
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

NextJS App Directory

In NextJS 13, TailwindCSS is fully compatible with just a simple inclusion as a dependency.

module.exports = {
  content: [
    // using ./src/ directory
    "./src/**/*.{js,ts,jsx,tsx}",
    // using ./ directory
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    // Add more paths as needed
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 2

If you come across this message later on, simply update the Tailwind config by including the path to any new folder in the purge array like so:

module.exports = {
    purge: [
        "./src/**/*.{js,ts,jsx,tsx}",
        // Add more paths here
    ],
    darkMode: 'class',
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

December 2021 Update:

Post-TailwindCSS version 3, there's a slight change in the configuration file format. The updated setup would look like this:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // Include additional paths here
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

NextJS App Directory

In NextJS 13, TailwindCSS is fully compatible with just a simple inclusion as a dependency.

module.exports = {
  content: [
    // using ./src/ directory
    "./src/**/*.{js,ts,jsx,tsx}",
    // using ./ directory
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    // Add more paths as needed
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 3

Answer №2

I encountered a similar problem.

I made the following modifications :

purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

to this instead :

purge: ["./pages/**/*.js", "./components/**/*.js"],

and voila! Issue resolved. strange situation

Answer 4

I encountered a similar problem.

I made the following modifications :

purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

to this instead :

purge: ["./pages/**/*.js", "./components/**/*.js"],

and voila! Issue resolved. strange situation

Answer 5

Answer №3

In my situation, I encountered an issue where a specific directory was not included in the content property of the tailwind.config.js file. As a result, any component within that directory was not being analyzed by tailwind.

The problem arose when I added a new component to a folder named providers, but forgot to include it in the content list.

To resolve this issue, I updated the content list to:

 content: [
     // ...
     "./components/**/*.{js,ts,jsx,tsx}",
     "./providers/**/*.{js,ts,jsx,tsx}",  // crucial line
 ]

By making this change, the providers directory was successfully recognized by tailwind and components within it were now being checked as well. Therefore, any directory housing components utilizing tailwind utility classes should be included in this configuration list.

Answer 6

In my situation, I encountered an issue where a specific directory was not included in the content property of the tailwind.config.js file. As a result, any component within that directory was not being analyzed by tailwind.

The problem arose when I added a new component to a folder named providers, but forgot to include it in the content list.

To resolve this issue, I updated the content list to:

 content: [
     // ...
     "./components/**/*.{js,ts,jsx,tsx}",
     "./providers/**/*.{js,ts,jsx,tsx}",  // crucial line
 ]

By making this change, the providers directory was successfully recognized by tailwind and components within it were now being checked as well. Therefore, any directory housing components utilizing tailwind utility classes should be included in this configuration list.

Answer 7

Answer №4

If you are transitioning to NextJs version 13, don't forget to make changes in your tailwind.config.js file by including the app directory as shown below:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    "./app/**/*.{js,ts,jsx,tsx}",
    './components/**/*.{js,ts,jsx,tsx}'
  ]
};

Answer 8

If you are transitioning to NextJs version 13, don't forget to make changes in your tailwind.config.js file by including the app directory as shown below:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    "./app/**/*.{js,ts,jsx,tsx}",
    './components/**/*.{js,ts,jsx,tsx}'
  ]
};

Answer 9

Answer №5

the issue I encountered was due to my incorrect use of the address in the purge section of the tailwind.config.css

Answer 10

the issue I encountered was due to my incorrect use of the address in the purge section of the tailwind.config.css

Answer 11

Answer №6

If you're facing problems with your DOM updates not reflecting correctly, make sure to check for consistency in casing between imports and file names!

For example, Header.js is not the same as header.js.

Answer 12

If you're facing problems with your DOM updates not reflecting correctly, make sure to check for consistency in casing between imports and file names!

For example, Header.js is not the same as header.js.

Answer 13

Answer №7

I experienced an issue where sporadically, the deployed site was missing a responsive attribute class that I had changed from md:w-1/4 to sm:w-1/4. Interestingly, adding a new path (even if fictitious) to the purge: [... array and redeploying resolved the issue for me.

Answer 14

I experienced an issue where sporadically, the deployed site was missing a responsive attribute class that I had changed from md:w-1/4 to sm:w-1/4. Interestingly, adding a new path (even if fictitious) to the purge: [... array and redeploying resolved the issue for me.

Answer 15

Answer №8

This puzzle had me stumped - it all came down to the sequence of the string

Success with {js,ts,jsx,tsx}, failure with {ts,tsx,js,jsx}

Snippet from tailwind.config.js:

export const content = [
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
  "./app/**/*.{js,ts,jsx,tsx}",
  "./src/**/*.{js,ts,jsx,tsx}",
];

Answer 16

This puzzle had me stumped - it all came down to the sequence of the string

Success with {js,ts,jsx,tsx}, failure with {ts,tsx,js,jsx}

Snippet from tailwind.config.js:

export const content = [
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
  "./app/**/*.{js,ts,jsx,tsx}",
  "./src/**/*.{js,ts,jsx,tsx}",
];

Answer 17

Answer №9

Personally, I found success by removing the .next folder and then running yarn build again.

It could potentially be a caching problem causing the issue.

Answer 18

Personally, I found success by removing the .next folder and then running yarn build again.

It could potentially be a caching problem causing the issue.

Answer 19

Answer №10

Consider incorporating the useEffect() hook and importing "tw-elements" in your _app.js file:

import { useEffect } from "react";
import Layout from "../components/Layout"

import "../styles/globals.css";

function MyApp({ Component, pageProps }) {

    useEffect(() => {
        import('tw-elements');
    }, []);

    return (
        <Layout className="scroll-smooth transition-all">
            <Component {...pageProps} />
        </Layout>

    )
}

export default MyApp

Answer 20

Consider incorporating the useEffect() hook and importing "tw-elements" in your _app.js file:

import { useEffect } from "react";
import Layout from "../components/Layout"

import "../styles/globals.css";

function MyApp({ Component, pageProps }) {

    useEffect(() => {
        import('tw-elements');
    }, []);

    return (
        <Layout className="scroll-smooth transition-all">
            <Component {...pageProps} />
        </Layout>

    )
}

export default MyApp

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

Answer №1

December 2021 Update:

NextJS App Directory

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Similar questions

The initial value in useEffect is not being updated by useState

Utilize the function of express

Having trouble retrieving input field values with Angular.js

Storing Redux state in local storage for persistence within a React application

VueJS3 and Vuetify are in need of some additional CSS classes

Alter the font color upon clicking the menu using jQuery

Scroll bar in Highstock does not completely cover the entire length when dealing with multiple series

Is there a way to modify the background of a div when a specific field within my component is true and the div is being hovered over?

Is the ng bootstrap modal within Angular failing to show up on the screen

What could be causing the error "styled is not defined as a function" while creating my component library using Rollup?

When trying to style a Material UI component in Mui v5, no matches for overloads were found

The JavaScript function for converting a date to a local string in the format of DD MMM YYYY is causing an error message in the browser console stating that it is not a valid function

Jquery failing to function properly when scrolling

What's preventing me from tapping on hyperlinks on my mobile device?

Can a column in ReactJS be protected from sorting or excluded from the sorting process?

Tips for utilizing navigator.getDisplayMedia with automatic screen selection:

Updating the title with respect to the current route in AngularJS 1

When I try to pass a variable as a prop to another .js file, it mysteriously transforms into an undefined value

Is it possible to retrieve JSON data from an external URL using JavaScript or jQuery?

Tips for resolving issues with dynamically displaying state information based on a selected country