Tailwind CSS Tutorial: The Ultimate Practical Guide, from Beginner to Expert

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that offers a range of low-level, single-purpose CSS classes that can be directly combined with HTML (or JSX, Vue templates, etc.) to quickly build custom user interfaces. Unlike frameworks like Bootstrap, which provide pre-built components such as buttons and cards, Tailwind CSS does not offer any ready-to-use components out of the box; instead, it provides a set of basic tools necessary for building any design.

This approach that prioritizes practicality means that developers no longer need to write custom CSS for their components, nor do they have to switch back and forth between HTML and CSS files frequently. By applying a series of styles directly within the HTML code… text-blue-600、p-4、bg-gray-100 By using such classes, it is possible to set the text color, padding, and background color. This significantly improves development efficiency and ensures a close coupling between the style and the structure, thereby reducing the size and complexity of the CSS files.

The core design philosophy of Tailwind CSS is “Constraints create freedom.” It ensures consistency in project design by employing a carefully crafted set of rules regarding spacing, colors, font sizes, and other visual elements that follow a defined design system, while still allowing for flexibility. Developers can create unique designs entirely based on these predefined constraints, without having to worry about styles spreading uncontrollably or becoming difficult to manage.

How to start using Tailwind CSS

There are several ways to integrate Tailwind CSS into your project. The most recommended approach is to install it as a PostCSS plugin, as this allows you to take full advantage of Tailwind’s optimization features.

Install using npm or yarn.

First, initialize the project using the package manager and install Tailwind CSS along with its dependencies. The key command for installation is… tailwindcss、postcss and autoprefixer。

npm install -D tailwindcss postcss autoprefixer

After the installation is complete, run the following command to generate the configuration files for Tailwind CSS and PostCSS. npx tailwindcss init -p It will be created simultaneously. tailwind.config.js and postcss.config.js The document.

npx tailwindcss init -p

Configure the template path.

Generated tailwind.config.js In the file, you need to make the necessary configurations. content Fields are used to tell Tailwind which file names to search for class names within. This typically includes your HTML, JavaScript, JSX, or Vue files. This is crucial because Tailwind uses a mechanism called “PurgeCSS” (in the production version) to remove all unused CSS, resulting in the smallest possible style file size.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import Style Directive

In your main CSS file (for example, src/styles.css Or src/index.cssIn this document, we use @tailwind The instruction is to inject the core styles of Tailwind.

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Then, import this CSS file into your project’s entry file. After completing these steps, you can start using Tailwind’s utility classes in your HTML code.

Core Utility Classes and Common Patterns

The class names in Tailwind CSS are highly semantic and predictable, following a simple naming convention: “attribute-value” (or “attribute-breakpoint-value”).

Layout and Spacing

These are the most commonly used sets of classes. For example,flex Used to set the layout of flexible boxes (flexbox).p-4 Express padding: 1remMargins are used for… m-*The padding is used inside… p-*Numbers usually correspond to a proportionally scaled spacing system (such as 0, 1, 2, 4, 6).

<div class="flex justify-between items-center p-4">
  <div class="ml-2">left side</div>
  <div class="mr-2">right side</div>
</div>

Color and background

You can easily set the text color, background color, and border color. The color system offers a rich palette of options for customization. text-blue-500、bg-gray-100、border-red-300The larger the number, the darker the color usually is (for example,blue-100 It’s very shallow.blue-900 (It’s very deep.)

responsive design

Tailwind follows a mobile-first approach. All utility classes are designed by default for mobile devices. To apply styles to larger screens, you need to add a breakpoint prefix before the class name. md:、lg:This makes building responsive interfaces extremely simple.

<div class="text-base md:text-lg lg:text-xl">
  This text appears in a basic size on mobile devices, becomes larger on tablets, and even larger on desktop computers.
</div>

States such as hovering and having focus applied

By adding a status prefix, you can set styles for different states of an element. For example,hover:bg-blue-600 It will change the background color when the mouse is hovered over it.focus:ring-2 A circular border will be added when the element receives focus.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  悬停有效果的按钮
</button>

Advanced Techniques and Custom Configurations

Once you have mastered the basics, you can fully leverage the potential of Tailwind by using some advanced techniques and custom configurations.

Extract component classes.

Although the principle of “practicality first” is a core concept, you can avoid repeating very long class lists in HTML by using… @apply In CSS, instructions are used to extract and reuse common style combinations, allowing you to create your own “component classes.”

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

Then, in HTML, you just need to use… class="btn-primary" That's all.

Custom Design System

All default values in Tailwind are configurable. You can modify them by making appropriate changes. tailwind.config.js For the files, you can customize the color, font, spacing, breakpoints, and other settings to ensure they fully match your brand or design guidelines.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

After defining it, you can use it. text-brand-blue Or p-84 Such a customized class.

Using JIT mode

Starting with Tailwind CSS v2.1+, a Just-in-Time (JIT) engine was introduced. This engine dynamically generates the necessary CSS code as you write your templates, rather than pre-compiling a large CSS file that contains all possible class combinations. This has led to significant performance improvements and enables features that were not possible in the traditional mode, such as the use of arbitrary value variations.

To enable JIT mode, you simply need to... tailwind.config.js Settings in... mode: 'jit'。

// tailwind.config.js
module.exports = {
  mode: 'jit',
  // ... 其他配置
}

Once enabled, you will even be able to use things like… w-[200px] Or top-[-10px] Such arbitrary value classes provide great flexibility for development.

summarize

Tailwind CSS has revolutionized the way front-end developers write styles thanks to its unique and practical prioritization methodology. It moves style decisions out of the CSS files and into the HTML markup, enabling efficient, consistent, and highly customizable interface development by combining a large number of atomic classes with specific functions. From simple installation and configuration to core layout, color, and responsive design features, as well as advanced customization options, component extraction, and JIT (Just-In-Time) compilation, Tailwind offers a comprehensive set of powerful and flexible tools. It encourages developers to work within carefully designed constraints, ensuring both design consistency and maximum flexibility. It is an invaluable asset for rapid prototyping and product development in modern web projects.

FAQ Frequently Asked Questions

Will Tailwind CSS make the HTML code become bloated?

Indeed, using Tailwind CSS can result in a large number of class names being added to HTML elements, which might make the HTML code appear somewhat cumbersome or verbose.

However, this “bloat” is structured and predictable; it actually transfers the complexity of the styling from CSS to HTML, which is much easier to manage. More importantly, this is achieved through configuration. content During the build process, the production tools remove all unused CSS classes. As a result, the final CSS file is usually much smaller than the CSS files generated by traditional manual methods or by using component libraries. This leads to significant performance improvements.

How to override or modify the default styles of Tailwind CSS?

You can override the default styles in various ways. The most recommended method is to… tailwind.config.js The document's theme.extend You can expand certain parts of the system to allow the addition of new values without affecting the existing functionality. If you want to completely replace a specific theme setting (such as the color), you can simply do so directly. theme Redefine it below. Additionally, use it before the utility class. !important Modifiers (such as) !text-red-500You can also achieve style overriding by using more specific selectors in CSS.

Which front-end frameworks is Tailwind CSS suitable for using with?

Tailwind CSS can be seamlessly integrated with almost all modern front-end frameworks. It natively supports React, Vue, Angular, Svelte, and more. You simply need to ensure that you use the correct class names in the framework’s templates or JSX, and configure PostCSS and Tailwind properly during the build process. Many frameworks (such as Next.js and Vite) even provide official examples or plugins for integrating Tailwind CSS, making the integration even easier.

Does using Tailwind CSS mean you have to give up writing CSS code by hand?

Absolutely not needed. Tailwind CSS does not exclude the use of handwritten (manual) CSS; instead, it complements it. You can still write custom CSS files within your project. @apply The instructions allow you to reuse its utility classes within your custom CSS. For extremely special styles that cannot be achieved by combining practical classes, or for scenarios that require complex CSS features (such as keyframe animations), writing custom CSS is still necessary. Tailwind simply provides a more efficient way to handle the common styling needs in projects that involve more than 90% (a likely numerical value representing a certain threshold or requirement).