Introduction to Tailwind CSS

A Different Way to Style

Most websites need some styling to look good. Traditionally, this meant writing a lot of custom CSS. You'd create an HTML element, like a button, and then jump over to a separate .css file to define a class, like .cool-button, with all its properties.

CSS frameworks like Bootstrap and Foundation changed the game by offering pre-built components. You could just add a class like btn-primary to your button, and it would instantly look like a primary button. This is fast, but it can be hard to customize. If you want your button to be just a little different, you might find yourself writing CSS to override the framework's default styles.

Tailwind CSS takes a different approach. It's a "utility-first" framework. Instead of giving you fully-styled components, it gives you a massive set of tiny, single-purpose utility classes. Think of them as building blocks.

Instead of a .button class, you might use bg-blue-500, text-white, py-2, and px-4 to create a button from scratch, right in your HTML.

Each class does one small thing: sets the background color, the text color, the vertical padding, or the horizontal padding. You combine these utilities to build a completely custom design without ever leaving your HTML file. It's like having a full set of styling tools at your fingertips.

Tailwind CSS is a utility-first framework that takes a different approach to styling web applications.

Why Go Utility-First?

This approach might seem strange at first. Isn't it messy to put all those classes in the HTML? While it can look verbose, the benefits are significant.

First, you stop wasting energy inventing class names. No more debating whether to call something .card-header or .post-title. You just build what you see.

Second, your changes are local. If you want to tweak the style of a single element, you do it right there in the HTML. You don't have to hunt down the right CSS rule in a separate stylesheet and worry if changing it will accidentally break something else on another page.

Finally, Tailwind keeps your project optimized. During the build process, it scans your files for any classes you've used and generates a CSS file containing only the styles you need. This means your final CSS file is incredibly small, which helps your website load faster.

Setting Up a Project

The best way to use Tailwind CSS for a real project is to install it via npm (Node Package Manager). This gives you access to its full power, including customization and optimization.

First, make sure you have Node.js installed. Then, open your terminal in your project's folder and run this command to install Tailwind CSS as a development dependency:

npm install -D tailwindcss

Next, generate your Tailwind configuration file. This file, tailwind.config.js, is where you can customize your design system.

npx tailwindcss init

This creates a minimal tailwind.config.js file. You need to tell Tailwind where your HTML and JavaScript files are so it can scan them for utility classes. Update the content property in your config file:

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

Now, create a main CSS file, for example at ./src/input.css, and add the Tailwind directives. These are special instructions that Tailwind will replace with its generated styles.

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

Finally, run the build process from your terminal. This command will take your input.css file, process it, and create an output.css file that you can link in your HTML. The --watch flag tells Tailwind to keep running and automatically rebuild the CSS whenever you make a change to your HTML or config files.

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

Just link ./dist/output.css in your HTML, and you can start using Tailwind's utility classes.

Quick Prototyping with a CDN

What if you just want to experiment or build a quick prototype without a full build setup? You can use Tailwind via a CDN (Content Delivery Network). Just add a single <script> tag to your HTML's <head> section.

<script src="https://cdn.tailwindcss.com"></script>

This method is incredibly fast for getting started. You can immediately begin using utility classes in your HTML, and they will work.

However, the CDN method has significant limitations. You can't customize Tailwind's default theme, you can't use special directives like @apply, and you can't install third-party plugins. Most importantly, you can't use the process that removes unused styles, so you're shipping the entire, massive library to your users. The CDN is great for learning and demos, but for any real production work, the npm installation is the way to go.

Quiz Questions 1/5

What is the primary philosophy behind Tailwind CSS?

Quiz Questions 2/5

What is the main purpose of the content property in the tailwind.config.js file?

Mastering Tailwind CSS