npm init -y
Create a folder called src and add an empty index.js file. The code that webpack compiles goes in here including any Javascript modules and the main Tailwind file.
npm i -D tailwindcss
npm i -D webpack webpack-cli webpack-dev-server style-loader css-loader postcss postcss-loader postcss-preset-env
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
devServer: {
static: {
directory: path.resolve(__dirname, 'dist'),
},
port: 3000,
open: true,
hot: true,
compress: true,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.css$/i,
include: path.resolve(__dirname, 'src'),
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
}
Create a style.css in your src folder and add these 3 lines
@tailwind base;
@tailwind components;
@tailwind utilities;
run the following command to generate your tailwind.config.js file and add this to it
module.exports = {
content: ['./dist/*.html'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Create a file in the root called postcss.config.js and add this
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
'postcss-preset-env',
tailwindcss
],
};
import './style.css';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack App</title>
</head>
<body>
<h1 class="text-4xl text-blue-700">My Webpack + Tailwind App</h1>
<script src="bundle.js"></script>
</body>
</html>
Add the following to your package.json file
"scripts": {
"dev": "webpack serve",
"build": "webpack"
},
To build once and create your dist/bundle.js file, run
npm run build
To run your webpack server
npm run dev
You now have Webpack setup along with Tailwind CSS
Phew, great guide, thank youu!