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:

https://i.sstatic.net/29MPf.png

https://i.sstatic.net/ddJOb.png

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

Tips for changing the background color depending on the value

Ways to reload the page following the submission of a form

"Troubleshooting the lack of functionality in nested ajax calls, click events, or event

How can I remove the color of a button in jquery after it's been clicked?

Choose not to alter the display value during keyup and keydown events, while still triggering the change event

What is the best way to send HTML tag content to mark.js and delimit them with a space or comma?

Conceal an absolutely positioned element outside its relatively positioned parent

The HTML attribute "hasbox" specifies the presence of a box within the element

Is the use of ReactDom.render in <iframe> triggering a DOMException stating that the operation is unsafe?

Customize the HTML language attribute in NextJS

Is it possible to incorporate a PHP line within a Handlebars context array?

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

Refreshing SQL Server data using an HTML form

Learn how to invoke a method of a particular subchild in the component hierarchy using React

I was able to resolve the fixed position issue of a button on Safari for iPhone 3G

`Get the height of a specific element within a FlatList using the index property in React Native`

Why Isn't the Element Replicating?

Configure environment files for different environments in React using webpack: .env, .env.test, and .env.production

Issue with Cross-Origin Request in ReactJS and Java: Preflight request failing access control validation

The slowness is being caused by replicating the state in the reducer