This is a basic foundation setup, for using tailwind in webpack. It will be used when using react.
.
├── package.json
├── postcss.config.js
├── src
│ ├── index.css
│ └── index.js
├── tailwind.config.js
└── webpack.config.js
Clone our previous postcss repo: https://github.com/ynwd/postcss
Install tailwindss
npm i tailwindcss -D
Create tailwind config
npx tailwindcss init
This will create a minimal tailwind.config.js file at the root of your project:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Update tailwind config to remove any unused classes for the smallest file size
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.js',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Update postcss config to use tailwind
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
require('cssnano')({
preset: 'default',
}),
],
};
Include Tailwind in your CSS
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Update entry point:
/* src/index.js */
import "./index.css"
Compile
npx webpack
You can get the final source code here: https://github.com/ynwd/postcss/tree/tailwind
Top comments (0)