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://mmap-1xr646x4a.vercel.app/ .
https://mmap-hewlbern.moodmap.vercel.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!
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';