Learn Tailwind CSS - Pre-Requisite Skills & Setup Environment

#Introduction

Welcome to the Learn Tailwind CSS series! This series takes you from mastering Tailwind CSS — the most widely used utility-first CSS framework in the world — from the conceptual foundations all the way to production readiness. There are 23 episodes in total, arranged across six phases.

Before touching tailwindcss, there are a few foundational skills and software tools you need to have. Why does this matter? Because Tailwind works differently from traditional CSS: you write utility classes directly in your markup, then the build tool scans your files and generates CSS only for the classes actually used. Understanding basic HTML and CSS will make all of these concepts feel natural.

Episode 0 is your roadmap. We'll make sure your foundational skills are solid, set up Node.js and an editor, create a project skeleton, install Tailwind CSS, and then verify your build toolchain for the first time.

#Prerequisite Skills to Master

#Semantic HTML and Document Structure

Tailwind works inside the class attribute of HTML elements. You need to be comfortable writing semantic markup: header, nav, main, section, article, footer, and understand element hierarchy and attributes like aria-* and data-*. Utility classes like flex or grid only make sense when applied to the right structure.

#Basic CSS: Box Model, Flexbox, and Grid

This foundation is non-negotiable. Tailwind names its utility classes after existing CSS concepts: p-4 is padding, m-2 is margin, flex enables flexbox, grid enables grid. Understand these first:

• Box model: content, padding, border, margin — the source of p-, m-, border-*.
• Flexbox: main axis, cross axis, justify-content, align-items.
• Grid: grid-template-columns, grid-template-rows, gap.
• Specificity and cascade: the order and specificity level of selectors.

padding  ->  p-*
margin   ->  m-*
flexbox  ->  flex, justify-*, items-*
grid     ->  grid, grid-cols-*, gap-*

If these concepts feel unfamiliar, spend some time learning the basics of CSS first before continuing this series.

#Build Tools and Terminal

Tailwind runs through the command line or a bundler. You need to be comfortable with the terminal, the concept of a working directory, and basic commands like npm install. You don't need to be an expert — just comfortable running commands and reading error output.

#Software to Prepare

#Node.js and Package Manager

Tailwind CSS is an npm package. Make sure the latest LTS version of Node.js is installed:

node --version
npm --version

The output of node --version should show version 18 or newer. Tailwind version 4 even requires Node.js 20 and above. Use npm, pnpm, or yarn depending on your preference — this entire series uses npm.

#Editor and Browser

The recommended editor is VS Code with the Tailwind CSS IntelliSense extension — it provides autocomplete, class linting, and CSS preview tooltips. For the browser, use a modern Chrome, Firefox, or Edge, complete with DevTools. DevTools will be your best friend for inspecting the utility classes that have been generated.

Optional but very useful: a GitHub account and access to a CI platform like GitHub Actions or Vercel. We'll use them in episode 13 for the build pipeline. Hardware-wise, a regular computer with 8GB of RAM or more is enough.

#Quick Project Setup

#Creating a Project Skeleton

Create a new directory and initialize a Node project:

mkdir belajar-tailwind
cd belajar-tailwind
npm init -y

Then set up a minimal structure with a main HTML file and a source CSS directory:

belajar-tailwind/
  index.html
  src/
    styles.css
  package.json

#Installing Tailwind CSS

Install Tailwind as a devDependency and create the configuration file:

npm install -D tailwindcss
npx tailwindcss init

The command npx tailwindcss init generates tailwind.config.js. Fill src/styles.css with the three core directives — the details will be covered in episode 2:

src/styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

#Verifying the Toolchain

Run the first build to make sure everything works:

npx tailwindcss -i src/styles.css -o dist/output.css

If it succeeds, a dist/output.css file appears. Open it and look: it already contains the CSS reset from base, some default utilities, and no errors. You can also use watch mode:

npx tailwindcss -i src/styles.css -o dist/output.css --watch

With this mode, every time you edit index.html, the CSS is regenerated automatically. This is the basic workflow that will accompany you throughout the series.

#Conclusion

In episode 0 you set up the foundation for the entire series: understanding the HTML and CSS skills needed, preparing Node.js, an editor, and a browser, creating a project skeleton, installing Tailwind CSS, and verifying your first build.

Key takeaways:

• Master semantic HTML and basic CSS: box model, flexbox, grid, specificity.
• Make sure Node.js LTS is installed and npm works.
• Set up VS Code with the Tailwind CSS IntelliSense extension.
• Minimal project: index.html, src/styles.css, and tailwind.config.js.
• First build via npx tailwindcss -i src/styles.css -o dist/output.css.
• --watch mode speeds up your development iteration.

Next, in episode 1, we'll discuss the history, background, and why you need Tailwind CSS — from the evolution of utility-first CSS, comparisons with traditional CSS and BEM, to a small case study on migrating components. Make sure your toolchain is ready, because the Learn Tailwind CSS journey has just begun!