- initialization.
npm init -y- install.
npm install -D tailwindcss- uninstall.
npm uninstall tailwindcss- install with extensions postcss and autoprefixer.
npm install -D tailwindcss postcss autoprefixer- add tailwind config.
npx tailwindcss init- add paths on tailwind.config.js.
content: ["./public/**/*.{html,js}"],- add path on package.json
"dev":"npx tailwindcss -i ./src/css/input.css -o ./public/css/style.css --watch"-
make file input.css.
-
add @tailwind directives on input.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;- build output
npx tailwindcss -i ./src/css/input.css -o ./public/css/style.css --watch<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/public/css/output.css">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>