Using Tailwind CSS for Your HTML Project

Tailwind CSS is a low-level CSS framework that allows you to quickly create fully customizable custom designs. Its flexible media breakpoints, modularity, and mobile-first design approach help you create a custom user interface without having to know much CSS code. You can use the framework for a variety of projects, but most developers prefer it for building React projects.

In this tutorial, we demonstrate how to use Tailwind CSS for your own HTML project.

Install Tailwind CSS Package

Run the NPM commands below to install the respective packages:

npm install -D tailwindcss
npx tailwindcss init

The command above will create a tailwind.config.js configuration file.

Specify Template Paths

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

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create the Tailwind Directives

Add the @tailwind directives to your main CSS file.

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

Three main Tailwind CSS directives are needed.

Build the Tailwind CLI Process

Run the command below to scan your template files for classes and build your CSS.

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

Include the Compiled CSS File

Now you can include compiled CSS file in the <head> section of your HTML file and start using Tailwind’s classes:

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

Share on Facebook