4.2 KiB
4.2 KiB
PostCSS Setup Examples
Basic PostCSS Configuration
Install dependencies:
npm install tailwindcss @tailwindcss/postcss
postcss.config.js:
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
input.css:
@import 'tailwindcss';
@theme {
--color-primary: oklch(0.65 0.25 270);
}
CommonJS Format
postcss.config.cjs:
module.exports = {
plugins: {
'@tailwindcss/postcss': {},
},
};
Next.js Integration
Install dependencies:
npm install tailwindcss @tailwindcss/postcss
postcss.config.js:
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
app/globals.css or styles/globals.css:
@import 'tailwindcss';
@theme {
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-primary: oklch(0.65 0.25 270);
}
app/layout.tsx:
import './globals.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Webpack Integration
webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: {
'@tailwindcss/postcss': {},
},
},
},
},
],
},
],
},
};
Custom PostCSS Plugins
Note: Tailwind v4 replaces the need for postcss-import and autoprefixer.
postcss.config.js:
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
Build Scripts
package.json:
{
"scripts": {
"dev": "postcss src/input.css -o dist/output.css --watch",
"build": "NODE_ENV=production postcss src/input.css -o dist/output.css"
}
}
Angular Integration
Install dependencies:
npm install tailwindcss @tailwindcss/postcss
Create postcss.config.js:
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
angular.json:
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"postcssConfig": "postcss.config.js",
"styles": ["src/styles.css"]
}
}
}
}
}
}
src/styles.css:
@import 'tailwindcss';
@theme {
--color-primary: oklch(0.65 0.25 270);
}
Nuxt 3 Integration
Install dependencies:
npm install tailwindcss @tailwindcss/postcss
nuxt.config.ts:
export default defineNuxtConfig({
postcss: {
plugins: {
'@tailwindcss/postcss': {},
},
},
});
assets/css/main.css:
@import 'tailwindcss';
@theme {
--color-primary: oklch(0.65 0.25 270);
}
app.vue:
<template>
<NuxtPage />
</template>
<style>
@import '@/assets/css/main.css';
</style>
Gatsby Integration
Install dependencies:
npm install tailwindcss @tailwindcss/postcss gatsby-plugin-postcss
gatsby-config.js:
module.exports = {
plugins: ['gatsby-plugin-postcss'],
};
postcss.config.js:
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
src/styles/global.css:
@import 'tailwindcss';
@theme {
--color-primary: oklch(0.65 0.25 270);
}
gatsby-browser.js:
import './src/styles/global.css';
Common Issues
Module parse failed: Unexpected character '@'
Ensure PostCSS is configured correctly and using @tailwindcss/postcss:
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
Styles not applying
Check that:
- CSS import is present:
@import "tailwindcss"; - PostCSS config uses correct plugin
- Template files aren't in
.gitignore - Class names are complete strings
Production builds missing styles
Set NODE_ENV=production:
NODE_ENV=production npm run build