Tailwind
Published
•1 min read
Tailwind is a CSS framework which contains CSS-utility classes which can be added straight to our markup (HTML).
Installation:
- Use the following command to install tailwind through npm
npm install -D tailwindcss - Create your
tailwind.config.jsfile using :npx tailwindcss init - Configure your template paths:
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } - Add the
@tailwinddirectives for each of Tailwind’s layers to your main CSS file :@tailwind base; @tailwind components; @tailwind utilities; - Start the Tailwind CLI build process:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch - Add your compiled CSS file to the and start using Tailwind’s utility classes to style your content:
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/output.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body> </html>
Most used classes in tailwind:
- Height:
h-1: height: 0.25rem; - Width:
w-1: width: 0.25rem; - Background-color:
bg-black: background-color: rgb(0 0 0); - Text-Color:
text-black: color: rgb(0 0 0); - Font-Size:
text-base: font-size: 1rem; - Font-Weight:
font-normal: font-weight: 400;