- tailwindcss executable : A utility-first CSS framework for rapidly building custom user interfaces.
$ mkdir landing-page && cd landing-page
$ curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
$ chmod +x tailwindcss-linux-x64landing-page
├── tailwindcss-linux-x64
├── tailwind.config.js
├── src
│ ├── index.html
│ └── tailwind.css
└── dist
└── styles.css
# Create a tailwind.config.js file
$ ./tailwindcss-linux-x64 initThe tailwind.config.js should appear then copy and paste the following into it :
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}- Copy the following in to /src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/dist/styles.css" rel="stylesheet" />
</head>
<body>
<h1 class="text-3xl font-bold underline text-blue-600 bg-slate-400">Hello world!</h1>
</body>
</html>- Copy the following into /src/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;$ ./tailwindcss-linux-x64 -i ./src/tailwind.css -o ./dist/styles.css --watchThe watch helps you to debug in real time the css of your html page
$ ./tailwindcss-linux-x64 -i ./src/tailwind.css -o ./dist/styles.css --minify