Prerequisites
- Basic Knowledge of HTML, CSS, and JavaScript
- Node.js and npm installed on your system
Installation
Create a project folder
mkdir my-project && cd my-project
Create a package.json
npm init -y
Install Webpack and its dependencies
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader postcss-loaderProject structure
Create src folders
mkdir -p src/{js,css,assets}
Created file structure
my-project
└── src
├── js
├── css
└── assetsCreate project files
touch src/index.html src/js/index.js src/css/styles.css src/css/tailwind.css src/css/output.css webpack.config.jsCreated file structure
my-project
├── src
│ ├── js
│ │ └── index.js
│ ├── css
│ │ ├── output.css
│ │ ├── styles.css
│ │ └── tailwind.css
│ ├── assets
│ │ └── e.g. image.png
│ └── index.html
└── webpack.config.jsUpdate index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tailwind CSS with Webpack</title>
<meta name="author" content="PhDr. Matej Lednár, PhD." />
<meta
name="description"
content="Matej Lednár - Tailwind CSS + Webpack template"
/>
<meta name="keywords" content="tailwind css, webpack, tempalte" />
</head>
<body>
<h1 class="text-4xl mt-2 text-center font-bold underline text-slate-700">
Hello, Tailwind CSS with Webpack!
</h1>
</body>
</html>Update package.json
Update scripts property. Add start and build scripts.
{
// ...
"scripts": {
"start": "webpack serve",
"build": "webpack build --mode=production",
...
},
// ...
}Install Tailwind CSS and its dependencies
npm install -D tailwindcss postcss autoprefixer
Create tailwind.config.js file and postcss.config.js
npx tailwindcss init -pConfigure Tailwind CSS
Add the paths to all of your template files in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to the tailwind.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;Import tailwind.css and styles.css
Import output.css and styles.css in the index.js. The styles defined in output.css (generated by Tailwind CSS) and style.css (custom CSS) will be included in the application. Use style.css for custom CSS.
import "../css/output.css";
import "../css/styles.css";
console.log('Tailwind CSS with Webpack!');Build optimization
Separate CSS file
To separate a CSS file from the bundle use mini-css-extract-plugin. The mini-css-extract-plugin extracts CSS from the bundle and creates a separate CSS file, which is included via a <link> element in the HTML document.
npm install --save-dev mini-css-extract-plugin
Optimize and minify CSS
To minimize and minify CSS use css-minimizer-webpack-plugin. The css-minimizer-webpack-plugin is a plugin for webpack that optimizes and minifies CSS files. It is based on the cssnano library, which is a widely-used CSS optimizer that helps reduce the size of CSS files by removing unnecessary whitespace, comments, and other redundant elements.
npm install css-minimizer-webpack-plugin -D
Update webpack.config.js
Update the webpack.config.js file with the following content.
"use strict";
const path = require("path");
const autoprefixer = require("autoprefixer");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/js/index.js",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
},
devServer: {
static: path.resolve(__dirname, "dist"),
port: 8080,
hot: true,
},
plugins: [
new HtmlWebpackPlugin({ template: "./src/index.html" }),
new miniCssExtractPlugin(),
],
module: {
rules: [
{
test: /\.(css)$/,
use: [
{
// Extracts CSS for each JS file that includes CSS
loader: miniCssExtractPlugin.loader,
},
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: "css-loader",
},
{
// Loader for webpack to process CSS with PostCSS
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [autoprefixer],
},
},
},
],
},
],
},
optimization: {
minimize: true,
minimizer: [new CssMinimizerPlugin()],
},
};Run multiple scripts simultaneously
To run multiple scripts simultaneously install the Concurrently plugin. It allows to run multiple npm scripts simultaneously.
npm install concurrently -D
Update package.json
Update scripts property. Add dev and tailwind:watch scripts.
{
// ...
"scripts": {
"tailwind:watch": "tailwindcss -i ./src/css/tailwind.css -o ./src/css/output.css --watch",
"dev": "concurrently \"npm start\" \"npm run tailwind:watch\"",
"start": "webpack serve",
"build": "webpack build --mode=production",
...
},
// ...
}Start project
npm run dev
Open your web browser and enter http://localhost:8080/ into the address bar.
Build project
npm run build
This command will trigger webpack to bundle your JavaScript and SCSS files according to the configuration in your webpack.config.js file. The bundled files will be outputted to the dist directory. You can use the Live Server extension to run the index.html file located in the dist directory. If you don’t have the Live Server extension installed, install it from the Visual Studio Code marketplace. It’s a convenient tool for quickly serving static files during development.
