CODEWITHSUNDEEP
next.jstailwind-cssvercel
Usama Abdul Razzaq
Usama Abdul Razzaq

Reputation: 803

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

Upvotes: 0

Views: 1705

Answers (3)

Pooja Narawad
Pooja Narawad

Reputation: 1

Try this: In your tailwind.config.js, you specified the content path to be ./components/**/*.{js,ts,jsx,tsx}, while the actual source folder could be named Components:

"./components/**/*.{js,ts,jsx,tsx}",
"./Components/**/*.{js,ts,jsx,tsx}",

Upvotes: 0

Miguel Gargallo
Miguel Gargallo

Reputation: 131

Check your "components" folder path is correct here:

  • 404.tsx
  • index.tsx

In my case, I did not follow best practices. Instead of calling it "components" I called it "compos".

The problem was VS that was changing the folder's names automatically, that's because on tailwind.config.js was not also called the same, and in some paths, folder was different.

Make sure everything is correct.

Upvotes: -2

Rodrigo Z. Armond
Rodrigo Z. Armond

Reputation: 9

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

Upvotes: 1

Related Questions