For some reason, tailwind
is not rendering properly in next.js.
I'm wondering if something is wrong with my settings?
Styles folder - tailwind.css
@tailwind base;
/* Write your own custom base styles here */
/* Start purging... */
@tailwind components;
/* Stop purging. */
/* Write you own custom component styles here */
.btn-blue {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
/* Start purging... */
@tailwind utilities;
/* Stop purging. */
/* Your own custom utilities */
....
_app.js
import React from "react";
// import "styles/global.scss";
import 'styles/tailwind.css'
import NavbarCustom from "components/Layout/NavbarCustom";
import Footer from "components/Layout/Footer";
import "util/analytics.js";
import { ProvideAuth } from "util/auth.js";
function MyApp({ Component, pageProps }) {
return (
<ProvideAuth>
<>
<NavbarCustom
bg="white"
variant="light"
expand="md"
logo="icons/Logo_512px.png"
/>
<Component {...pageProps} />
What am I doing wrong? so confused, usually this sort of setup is fine.
This is the site btw - https://moodmap.app/ .
https://moodmap.app/ is the site example.
tailwind.config.js
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
},
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
'accent-1': '#333',
},
},
},
variants: {},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': false,
},
},
],
],
}
{
"name": "MoodMap",
"version": "0.1.0",
"private": true,
"keywords": [
"MoodMap"
],
"dependencies": {
"@analytics/google-analytics": "0.2.2",
"@stripe/stripe-js": "^1.5.0",
"analytics": "0.3.1",
"fake-auth": "0.1.7",
"mailchimp-api-v3": "1.13.1",
"next": "9.5.3",
"query-string": "6.9.0",
"raw-body": "^2.4.1",
"rc-year-calendar": "^1.0.2",
"react": "16.12.0",
"react-dom": "16.12.0",
"react-hook-form": "4.10.1",
"react-query": "2.12.1",
"react-transition-group": "^4.4.1",
"stripe": "^8.52.0"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"stripe-webhook": "stripe listen --forward-to localhost:3000/api/stripe-webhook"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"stylelint": "^13.7.1",
"stylelint-config-standard": "^20.0.0",
"tailwindcss": "^1.8.9"
}
}
Thanks!
Install the Tailwind CSS VSCode Plugin Once you've found the plugin in VSCode, click the Install button to install the plugin globally in your workspace. From here, the plugin should automagically ✨ work so long as you have Tailwind installed and a tailwind. config. js or tailwind.
Get Started with TailwindStart with a forever-free plan. Start with a forever-free plan.
The same issue with my project, but I try to change the globals.css
like this:
before
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');
@tailwind base;
@tailwind components;
@tailwind utilities;
after
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import './base.css';
@import 'tailwindcss/utilities';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With