'Tailwind-css v3 is not working after deployed on Vercel

I am using tailwind-css v3 with nextJs and deployed my application on vercel, and my css is not working properly, but the styles are working during app creation on localhost

tailwind.config.js

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

folder structure

  • how can i fix my styles


Solution 1:[1]

You can view a working example here: https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

It's possible your content regex is incorrect. This example should help you work backward.

Solution 2:[2]

Try (tailwind.config.js):

module.exports = {
    darkMode: "class",
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
        './node_modules/tw-elements/dist/js/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require('tw-elements/dist/plugin')
    ], }

And use the useEffect() to to "import tw-elements" (in file _app.js):

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 leerob
Solution 2 Rodrigo Z. Armond