Start Learning TailwindCSS

If you are one of the developers I'm mentoring, you should be reading all of this. If I've included it in here, there's a reason for it.

Before opening the src/index.html file in your browser, you need to enter the following commands in your terminal to set everything up:

npm install
npm run build-css

What is TailwindCSS?

TailwindCSS is a utility-first CSS framework designed for rapid web development. Unlike traditional frameworks (such as Bootstrap) which provide ready-made components, Tailwind offers utility classes that you apply directly in your HTML, allowing for custom designs without writing extensive CSS.

Key Benefits

Speed: Enables quick prototyping by adding styling directly in HTML.
Consistency: Ensures design consistency with a predefined set of utilities.
Customizable: Highly adaptable through a configuration file for defining your design system.
Responsive Design: Simplifies creating responsive layouts with mobile-first utility classes.

How It Works

TailwindCSS uses utility classes for styling, such as text-center for centering text, bg-blue-500 for a blue background, and p-4 for padding. You integrate Tailwind into your project, use these classes in your markup, and Tailwind generates a CSS file with only the utilities you've used, keeping the file size minimal.

Setup Prerequisites

Before you begin, ensure you have Node.js installed on your system. You can download it from Node.js official website.

Step 1: Initialize Your Project

First, you need to create a package.json file for your project. You can do this by running the following command in your project directory:

npm init -y

This command creates a package.json file with default values.

Step 2: Install TailwindCSS

Next, install the TailwindCSS package:

npm install -D tailwindcss

Step 3: Create Configuration Files

After installing the necessary packages, generate the tailwind.config.js file by running:

npx tailwindcss init

This command creates a tailwind.config.js file for the TailwindCSS configuration.

Step 4: Set Up Your CSS File

Create a styles.css file in your project directory. Then, add the following Tailwind directives to the top of your styles.css file:

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

These directives are necessary for including Tailwind's styles in your project.

Step 5: Configure Your Build Script

In your package.json file, configure a build script like the one below.

"scripts": {
  "build": "tailwindcss -i styles.css -o output.css"
}

This script takes your styles.css file, processes it, and outputs the result to output.css.

Step 6: Create Your HTML File

Create an index.html file in your project directory. Link to the processed CSS file (output.css) in the <head> section of your HTML:

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

Step 7: Build Your CSS

Finally, run the build script to process your CSS file:

npm run build

After running this command, you'll have an output.css file that includes all the TailwindCSS styles you need. Be sure to import it as a stylesheet in the index.html file.

Conclusion

You've successfully set up TailwindCSS for your base HTML/CSS/JS website. You can now begin using TailwindCSS classes in your index.html file to style your website.

Official Documentation

Next, you should check out the official TailwindCSS documentation to learn more about using TailwindCSS.

You can find the official TailwindCSS installation instructions here - TailwindCSS Install Docs

You can play around with TailwindCSS in the browser using this link here - TailwindCSS Playground

Doc0x1 / TailwindCSS-Example-Setup