Skip to content
Chandan Kumar

Tailwind CSS tutorial getting started

css1 min read

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.

1npm init -y
2npm install -D tailwindcss # Dev dependency

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

1npx tailwindcss init
2mkdir src

2. Configure tailwind

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

1content: ["./src/**/*.{html,js}"]

3. Create CSS

Create a CSS file to include it in the HTML file

1touch src/input.css

Add tailwind directive to the CSS file

input.css
1@tailwind base;
2@tailwind components;
3@tailwind utilities;

4. Start Tailwind CLI build

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

5. Consume it

Edit index HTML file to include the

index.html
1<link href="../dist/output.css" rel="stylesheet">

Start using Tailwind CSS classes

index.html
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.

Comments

Copyleft. WTH
Theme by LekoArts