Overview

Tailwind CSS is a utility-first CSS framework that provides a set of utility classes that you can use to style your HTML elements. Here are the key points to know about Tailwind for beginners:

• It follows an atomic CSS approach where each class has a single responsibility.
• You add Tailwind classes directly in your HTML to style elements.
• Tailwind provides a vast set of utility classes for layout, typography, colors, borders, spacing, etc.
• There are modifiers to conditionally apply styles based on things like hover, focus, active, etc.
• Tailwind has a flexible configuration that allows you to customize it for your needs.
• Tailwind uses a Just-in-Time (JIT) compiler that only compiles the CSS that you actually use.
• Tailwind offers a high degree of control and flexibility while staying opinionated in its defaults.

Setting up Tailwind

There are two main ways to set up Tailwind:

1. Using a CDN (easiest way to get started)

<link href="<https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css>" rel="stylesheet">

1. Using Tailwind as a PostCSS plugin (recommended for full features)

npm install -D tailwindcss postcss autoprefixer

// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {}
  },
  plugins: []
}

// postcss.config.js
module.exports = {
  plugins: [
    'tailwindcss',
    'autoprefixer'
  ]
}

Then you build your Tailwind CSS:

npx tailwindcss -o ./css/output.css

And import the output CSS file in your HTML.

How to use Tailwind?

Class Names