'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: [],
};
- 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 |