Tailwind is a utility-first CSS library. This articile is about using tailwind CSS with just HTML and CSS file and doesn't cover JavaScript toolkit/library/framework like React, Nextjs Angular, Vue etc.

Above youtube video is hands on coding in action.

Getting started

To use Tailwind CSS with HTML we do the following.

1. Install Tailwind CSS
2. Configure HTML
3. Add Tailwind directives to CSS
4. Use tailwind CLI to build
5. Sprinkle Tailwind classes

Source for the steps below is available at - https://github.com/ch4nd4n/practice/tree/tailwind

1. Install and init

This tutorial uses Node.js, you will need Node.js to run the instructions, but you don't need in depth understanding about Node.js

Use npm to initialize a Node.js app and install tailwind as dev dependency.

Copycopy code to clipboard
1npm init -y
2npm install -D tailwindcss # Dev dependency

Next we initialize tailwindcss and create tailwind.config.js using npx

Copycopy code to clipboard
1npx tailwindcss init
2mkdir src

2. Configure tailwind

Open tailwind.config.js in editor and update content.

Copycopy code to clipboard
1content: ["./src/**/*.{html,js}"]

3. Create CSS

Create a CSS file to include it in the HTML file

Copycopy code to clipboard
1touch src/input.css

Add tailwind directive to the CSS file

Copyinput.css: copy code to clipboard
1@tailwind base;
2@tailwind components;
3@tailwind utilities;

4. Start Tailwind CLI build

Copycopy code to clipboard
1mkdir dist
2npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

5. Consume it

Edit index HTML file to include the

Copyindex.html: copy code to clipboard
1<link href="../dist/output.css" rel="stylesheet">

Start using Tailwind CSS classes

Copyindex.html: copy code to clipboard
1<main class="bg-slate-100 pt-5 pb-5">
2  <div class="container m-auto">
3    <!-- Hero Card-->
4    <div class="ui-hero-card border-2 rounded-sm p-4">
5      <h2 class="text-3xl">Hero Section</h2>
6      <p>This paragraph needs a photo section</p>
7    </div>
8  </div>
9</main>

Open index HTML in browser and view your changes.

Happy hacking.