Logo
Posts Projects
3 mins read

TailwindCSS Basic Guide

A practical and beginner-friendly guide to TailwindCSS, with hands-on practice resources.

#TailwindCSS #Web Development #CSS Framework
TailwindCSS Basic Guide

Overviewh2

If you’re doing front-end work, chances are narinig mo na ang TailwindCSS. It’s a utility-first CSS framework na sobrang useful lalo na kung ayaw mo na magsulat ng paulit-ulit na custom CSS.

Instead of writing your own styles from scratch, you compose your UI directly in HTML using utility classes. Medyo weird sa umpisa, pero once masanay ka, sobrang bilis na ng workflow.

What is TailwindCSS?h2

TailwindCSS gives you small, single-purpose classes like:

  • p-4, m-2 for spacing
  • text-xl, font-bold for typography
  • bg-blue-500, text-gray-700 for colors

You apply them directly sa HTML elements. No need mag-isip ng class names, no need mag-jump pabalik-balik sa CSS file.

Why Developers Like TailwindCSSh2

  • Highly customizable (Tailwind v4) – Sa Tailwind v4, karamihan ng customization (colors, fonts, spacing, design tokens) ay ginagawa na direkta sa main CSS file gamit ang @theme at CSS variables, instead na puro nasa tailwind.config.js
  • Fast development – Once memorized mo na yung common utilities, sobrang bilis mag-layout
  • No class naming stress – Utility classes na ang bahala
  • Responsive by default – Mobile-first and easy to scale up
  • Production optimized – Only the classes you use get shipped
  • Strong community – Madaming docs, examples, at references

Downsides (Real Talk)h2

  • Learning curve – Lalo na kung sanay ka sa traditional CSS
  • HTML can get long – Kapag di ka disciplined, hahaba ang class list

These aren’t deal breakers, pero good to be aware of them.

When TailwindCSS Makes Senseh2

TailwindCSS works best if:

  • You build UI fast (prototypes, internal tools, dashboards)
  • You care about consistency across components
  • You’re working with component-based frameworks
  • You don’t want to fight CSS specificity anymore

Framework Compatibilityh2

TailwindCSS works well with:

  • React
  • Vue
  • Angular
  • Laravel Blade
  • Even plain HTML

Basically, kung may HTML, pwede si Tailwind.

Getting Startedh2

Prerequisitesh3

  • Basic HTML and CSS knowledge
  • A decent code editor (VS Code recommended)
  • Node.js (for the CLI and build process)

Installation (Tailwind v4 Style)h2

Terminal window
npm init -y
npm install tailwindcss @tailwindcss/cli

Create these files:

Terminal window
src/index.html
src/css/main.css

Add Tailwind and theme config sa main.css:

@import "tailwindcss";


@theme {
  --color-primary: #7c3aed;
  --font-sans: ui-sans-serif, system-ui;
}

Link the compiled CSS:

<link href="/css/main.css" rel="stylesheet" />

Run the watcher:

Terminal window
npx @tailwindcss/cli -i ./src/css/main.css -o ./public/css/main.css --watch

Core Concepts You Should Learn Firsth2

Layouth3

  • container, flex, grid
  • flex-col, justify-center, items-center
  • grid-cols-3, gap-6

Spacingh3

  • Margin: m-4, mt-6, mx-auto
  • Padding: p-4, px-6, py-2

Colorsh3

  • Text colors: text-gray-700, text-blue-500
  • Backgrounds: bg-white, bg-gray-100

Typographyh3

  • Font size: text-sm, text-xl, text-3xl
  • Font weight: font-normal, font-bold
  • Alignment: text-left, text-center

Responsive Behaviorh3

Tailwind uses mobile-first breakpoints:

<h1 class="text-xl md:text-3xl lg:text-5xl">Responsive Heading</h1>

Practice Your Knowledgeh2

If you want to test your Tailwind skills in a more practical way, you can use this practice repo:

👉 https://github.com/enehry/tailwindcss-practice

This repository is designed as a UI cloning exercise. The goal is simple:
recreate the provided sample UI as close as possible using Tailwind CSS v4 (CLI).

Inside the repo, you’ll find:

  • A sample UI image (task-tailwind.png) that serves as your visual reference
  • A basic project structure (src/, img/)
  • Image assets you must use in the layout
  • A README that explains how to set up Tailwind v4 using the CLI

Your focus should be on matching the UI in terms of:

  • layout
  • spacing
  • colors
  • typography
  • responsive behavior

This is not a guided tutorial — it’s meant to simulate a real-world front-end task where you translate a design into code. Inspect the UI, break it down into sections, and apply the appropriate Tailwind utilities.

If you can recreate the layout cleanly and responsively, you’re already on the right track. If you want me to check your work or give feedback, feel free to open an issue in the repo with a link to your code.

Final Thoughtsh2

TailwindCSS is not magic, but once it clicks, it’s hard to go back.
My suggestion: learn the basics, practice often, and don’t try to memorize everything at once.

The speed gain comes naturally over time.