-
Create tailwind.config.js:
npx -i tailwindcss -
Configure tailwind.config.js:
module.exports = {
purge: [
'./**/*.html'
],
theme: {},
variants: {},
plugins: [],
}
- Create infile.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
-
Watch for changes:
$ npx tailwindcss -i infile.css -o outfile.css --watch -
index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./outfile.css" rel="stylesheet">
</head>
<body>
<h1 class="font-bold text-5xl text-red-500">TAILWIND-CSS</h1>
</body>
</html>
- Refactor classes as components:
// infile.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.my-title {
@apply font-bold text-5xl text-red-500;
}
}
- Update index.html:
<h1 class="my-title"> TAILWIND-CSS</h1>
- When ready to deploy hence optimize:
NODE_ENV=production npx tailwindcss -i infile.css -o outfile.css