Tailwind CSS Getting Started Guide: Mastering a Modern CSS Framework That Prioritizes Practicality

What is Tailwind CSS?

In traditional CSS development, we usually need to create custom class names for each HTML element and then define the styles for these classes in a separate CSS file. Tailwind CSS, on the other hand, adopts a completely different approach called “Utility-First.” It is a CSS framework that prioritizes the use of functional classes, offering a large number of highly specific, single-purpose CSS classes. Developers can build any desired design by simply combining these classes directly in their HTML or JSX code.

Tailwind CSSThe core idea is to implement styles as reusable, atomic classes. For example, to create a button with a padding, a blue background, and white text, you don’t need to create a new class with a specific name.btn-primaryInstead of creating a class and writing CSS rules for it, you can directly add CSS rules to the elements themselves.p-4、bg-blue-500andtext-whiteThese classes. This approach significantly reduces the time spent switching back and forth between project files, and it presents style decisions directly within the markup language, making the UI construction process more intuitive and efficient.

Compared to other frameworks such as Bootstrap,Tailwind CSSIt does not provide pre-built UI components with a fixed appearance (such as dropdown menus or navigation bars). Instead, it offers the “raw materials” needed to create these components. This paradigm shift offers unparalleled flexibility, allowing developers to implement completely customized designs without having to struggle with the framework’s default themes or styles.

Recommended Reading The Essence of Tailwind CSS: Unveiling the Working Principles of this Practical, Atomic CSS Framework。

How to start using Tailwind CSS

Install through the package manager.

The most common and recommended way to install packages is through package managers such as npm or yarn. First, initialize a Node.js project in the root directory of your project (if you haven’t done this yet), and then proceed with the installation.tailwindcssand their corresponding dependencies.

WordPress.com Website Builder Assistant

99.999% Availability + Cross-zone Disaster Recovery, 24/7 Support, Free AI Build Site with Blog Package Purchase

Free domain name for one year

Visit WordPress.com Website Builder Helper →

UltaHost Website Builder Assistant

900+ Free, Customizable Templates to Get the SEO Power You Need to Optimize Your Site for Search Exposure

Offer 40%

Visit UltaHost Website Builder Helper →

npm install -D tailwindcss
npx tailwindcss init

The first command will install Tailwind CSS as a development dependency in your project. The second command will generate a default configuration file.tailwind.config.jsThis is the main place where you can customize the behavior of your framework, such as themes, plugins, and variants.

Configure the template path.

The generatedtailwind.config.jsThe file contains one…contentThese fields are used to specify which files Tailwind should scan in order to find the class names being used. This is crucial for the production build process, as Tailwind uses a “tree shaking” optimization technique to generate only the CSS that is actually used in your project. You need to configure these settings according to the structure of your project. For example:

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

Introduce basic styles

Next, in your main CSS file (for example…src/styles.cssOrsrc/index.cssIn this document, we use@tailwindInstructions to include all levels of Tailwind CSS.

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

@tailwind baseInstruction injection in Tailwind CSS refers to the use of malicious code to manipulate the basic styles of a website, such as the default reset and default styling rules.@tailwind componentsInstruction injection includes some predefined component classes that you might use.@tailwind utilitiesThe instructions are then injected into all the functional classes, which form the core of the framework. Finally, a build tool (such as PostCSS) is used to process this CSS file and convert it into pure, browser-readable CSS code.

Recommended Reading Master the core framework of Tailwind CSS to improve the efficiency of front-end development and the consistency of designs.。

Core Concepts and Practical Classes

The key to understanding Tailwind CSS lies in mastering its naming system and how it works. Its class names are typically descriptive of their functionality and follow a consistent naming convention.

responsive design

Tailwind includes a mobile-first responsive design system. You can specify the style of any feature class at a particular breakpoint by adding a responsive prefix to that class. The default breakpoint prefixes are:sm:、md:、lg:、xl:and2xl:。

For example.text-center md:text-leftThis means that on screens with a medium size or larger, the text will be aligned to the left, while on smaller screens, it will be centered. You can…tailwind.config.jsThe document'stheme.screensSome of these breakpoint values can be completely customized by the user.

Bluehost Website Builder

Offers AI website creation tool, 24/7 live chat & phone support, free domain name for 1 year, free CDN, 99.99% uptime SLA

Visit Bluehost

State variants

In addition to being responsive, Tailwind also supports a variety of state variants, allowing you to define classes for the styling of elements in different states. The most common state variant is hover.hover:focusfocus:activationactive:), etc.

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
  点击我
</button>

In this example, the button has a blue background by default. When the mouse hovers over it, the background color changes to dark blue, and a blue halo appears when the button receives focus. All functional effects can be applied to specific states by adding appropriate prefixes to the corresponding class names.

Practical combinations and customizations

Although Tailwind provides a vast number of pre-defined functional classes, you may still need to customize your styles. There are mainly two ways to do this: either by combining them inline within your HTML, or by using them in your CSS.@applyExtract patterns of repeated instructions.

Recommended Reading Tailwind CSS Chinese Beginner's Guide: From Zero to Mastery – Building Modern, Responsive Web Pages。

The most common way is to combine them directly in HTML:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md">
  ...
</div>

For style combinations that are used repeatedly in multiple places, you can define them in your CSS file.@applyExtract it into a custom component class.

hosting.com

Free SSL, Cloudflare CDN, WAF, 40+ global server rooms to choose from, lower latency near you, 24/7/365 service support, you can now save up to 67%, support for AI builds and SEO optimization!

Visit hosting.com

.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

Then, in HTML, you can use it directly.btn-primaryThis class… This approach not only maintains the practicality of Tailwind but also adheres to the DRY (Don’t Repeat Yourself) principle.

Implementing and optimizing in a project

Building modern user interfaces

Let’s practice using Tailwind CSS by building a simple card component. This exercise will demonstrate how to combine fine-grained functional classes to create a complete visual element.

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
  <img class="w-full" src="/img/card-top.jpg" alt="Card image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Card title</div>
    <p class="text-gray-700 text-base">
      This is a card built using Tailwind CSS. We quickly achieved the desired design by combining multiple useful classes, such as margins, text styles, and shadows.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"># Tag 1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"># Tag 2</span>
  </div>
</div>

This code does not use any custom CSS at all; it simply defines a card with a complete visual hierarchy, padding, colors, and layout using only Tailwind CSS classes. You can adjust the class names (for example, by changing…)bg-whitechange intobg-gray-50You can easily change its appearance.

Production Environment Optimization

Since Tailwind CSS automatically generates thousands of functional classes by default, using them directly in a production environment would result in a CSS file that is too large in size. Therefore, enabling the “Purge” optimization step in the production build process is a mandatory requirement.

Intailwind.config.jsPlease configure it correctly in Chinese (Simplified)contentAfter adding the fields, when you run the production build command (for example…)NODE_ENV=productionWhen you use Tailwind CSS, it analyzes the template files you specify and only retains the classes that are actually used, removing all unused styles. This can reduce the size of the final CSS file from several MB to just a few KB, which is crucial for website performance.

In addition, you can also make full use of…tailwind.config.jsThe translation of the Chinese sentence into English is as follows: \nIn thethemeSome elements are used to extend or override the default design tokens, such as colors, fonts, spacing, etc., in order to ensure consistency throughout the project’s design system. A plugin system is utilized for this purpose.@tailwindcss/formsOr@tailwindcss/typographyThis can further enhance the functionality of the framework, providing more advanced and useful classes for complex scenarios such as forms and formatting.

summarize

Tailwind CSS has revolutionized the way developers write CSS through its unique “practicality-first” methodology. It moves style decisions out of separate style sheets into the markup language itself, allowing for the rapid creation of highly customized user interfaces by combining a large number of finely granulated, single-purpose functional classes. This approach significantly improves development efficiency, reduces the need for frequent context switches between different stylesheets, and ensures consistency in the UI by enforcing the use of a standardized, constrained design system.

Although it requires memorizing and understanding the naming conventions when getting started, once you master it, the development speed is incomparable to traditional CSS methods. More importantly, it addresses the potential issue of large CSS file sizes by using optimization techniques suitable for production environments, making it perfectly suitable for large, high-performance web projects. For teams and individuals who value development efficiency, design flexibility, and optimal performance, Tailwind CSS is an extremely attractive and modern solution.

FAQ Frequently Asked Questions

Will the CSS files generated by Tailwind CSS be very large?

In development mode, in order to provide the best development experience, Tailwind generates a complete CSS file that includes all possible classes. This file can be quite large in size—usually several MB.

However, in a production environment, by configuring everything correctly…contentYou can specify the path and run the production build. Tailwind will then perform the “tree shaking” optimization, which removes any unused classes from your HTML/JSX templates. The resulting CSS file typically weighs only around 10–30 KB, which is even smaller than many manually written CSS files. So, you don’t have to worry about the file size at all.

Will writing so many class names in HTML make the code difficult to read and maintain?

This is indeed a common concern for many developers when they first start using Tailwind. Experience has shown that, although the list of class names for individual elements can become quite long, the maintainability of the code actually improves.

Because you no longer need to jump back and forth between HTML and CSS files to search for or modify styles, all the style information is centralized in one place. For complex class name combinations, you can use multi-line formatting and grouping by function to improve readability. Additionally, for style patterns that appear repeatedly in multiple places, you can…@applyThe instructions suggest extracting these elements into custom component classes, or encapsulating them within JavaScript frameworks (such as React or Vue) to create reusable components, thereby maintaining the cleanliness and organization of the code.

Is Tailwind CSS suitable for use with front-end frameworks such as React and Vue?

Tailwind CSS is an excellent complement to modern front-end frameworks such as React, Vue, and Angular. In fact, it is very popular within the communities of these frameworks.

You can directly write Tailwind class names in JSX or Vue templates. More importantly, you can easily wrap styled elements into reusable framework components. For example, in React, you can create one such component by…ButtonThe component uses Tailwind classes to define its styles, allowing for the use of a consistent button style throughout the entire application. At the same time, it benefits from the flexibility of Tailwind as well as the modular advantages of the framework. The framework’s component system effectively compensates for Tailwind’s limitations in abstracting and reusing code blocks.

How to customize design variables such as theme colors and spacing?

Customizing themes is very convenient, mainly by modifying the files located in the project’s root directory.tailwind.config.jsThis can be achieved using a configuration file.

You can do that within the configuration object.themeYou can expand or override certain parts of the settings. For example, to add a new brand color or modify the default spacing scale, you can proceed as follows:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

utilizationextendYour custom settings will be added while retaining all the default values from Tailwind. If you want to completely replace a certain category (such as the entire color palette), you can choose not to use those default settings.extendAnd instead of doing that, just do it directly…theme.colorsDefine a new object.