Tailwind

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It's fast, flexible, and reliable — with zero-runtime.

Why Tailwind?

It is Highly Customizable
It Has Common Utility Patterns
It Can Be Optimized Using PurgeCSS
It Enables Building Complex Responsive Layouts Freely
It Facilitates Fluid Community Interaction

Installation

Tailwind CLI

Install Tailwind CSS

Install tailwindcss via npm, and create your tailwind.config.js file.

npm install -D tailwindcss

npx tailwindcss init

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

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

Start the Tailwind CLI build process

Run the CLI tool to scan your template files for classes and build your CSS.

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

Start using Tailwind in your HTML

Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Play CDN

Add the Play CDN script to your HTML

Add the Play CDN script tag to the <head> of your HTML file, and start using Tailwind’s utility classes to style your content.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Try customizing your config

Edit the tailwind.config object to customize your configuration with your own design tokens.

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>

Try adding some custom CSS

Use type="text/tailwindcss" to add custom CSS that supports all of Tailwind's CSS features.

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
    }
  </style>
------
 <div class="lg:content-auto">

Try using a first-party plugin

Enable first-party plugins, like forms and typography, using the plugins query parameter.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
  <div class="prose">
    <!-- ... -->
  </div>
</body>
</html>

Getting started with Tailwind CSS

A brief guide for beginners about basics of Tailwind, installation and basic usage.

Table of contents