Practical Guide to Tailwind CSS in Chinese: Building a Modern Responsive UI from Scratch

What is Tailwind CSS?

Tailwind CSS is a feature-first CSS framework that enables developers to quickly build custom designs directly in HTML by providing a series of low-level, composable utility classes. Unlike traditional CSS frameworks such as Bootstrap or Bulma, Tailwind does not offer pre-designed components (such as dropdown menus and navigation bars), but instead provides a set of atomic classes similar to LEGO bricks. These classes correspond to single CSS properties, such as text-center Corresponding to text-align: center;，mt-4 Corresponding to margin-top: 1rem;By combining these classes, developers can create any visual design without having to write custom CSS, thus greatly improving development efficiency while maintaining a high degree of customization.

Its core philosophy is “constraints bring freedom”. Through a carefully designed design system (spacing, color, font size, etc.), Tailwind ensures design consistency. At the same time, it supports customization through configuration files. tailwind.config.js Completely customize this design system so that it can seamlessly adapt to any brand style. In addition, by removing unused styles, the production version of Tailwind can be very small, optimizing the loading performance for end users.

Environment setup and project initialization

There are several ways to start using Tailwind CSS, including through a CDN, using PostCSS, or via its CLI tool. For modern front-end projects, the most recommended approach is to integrate it via PostCSS, as it provides the most comprehensive feature set and supports production optimization.

Recommended Reading Master Tailwind CSS: A Practical Guide to Developing Components, from Beginner to Expert Level。

Install it using PostCSS

First, you need a Node.js environment. You can initialize a project and install Tailwind using npm or yarn. For a new project, the usual steps are to install the required packages using npm. You need to install tailwindcss itself, and postcss and autoprefixerBecause Tailwind is a PostCSS plugin.

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 init -y
npm install -D tailwindcss postcss autoprefixer

Next, run the following command: npx tailwindcss init The command to generate the configuration file for Tailwind tailwind.config.jsAt the same time, you also need to create a PostCSS configuration file. postcss.config.jsAnd configure Tailwind and autoprefixer in it.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Introduce Tailwind styles

After the installation is complete, you need to add the instructions for Tailwind to the CSS entry file of the project. This file is usually named src/styles.css Or input.css。

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

@tailwind base The instruction will inject Tailwind's basic styles, reset the browser's default styles, and set some basic rules.@tailwind components It will inject whatever you've provided. @apply The custom component classes registered by instructions or configuration files.@tailwind utilities All of Tailwind's utility classes will be injected.

Finally, you need to build this CSS file. If you use packaging tools such as webpack or Vite, they will handle it automatically after configuring the PostCSS plugin. You can also use Tailwind CLI to monitor and build it:npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watchAfter the construction is completed, the output file will be imported into HTML output.css That's all.

Recommended Reading An in-depth analysis of the Tailwind CSS framework: from beginners' guide to practical application。

\nCore Practical Classes and Responsive Design

The core of Tailwind CSS lies in its extensive and systematic library of utility classes. Mastering the naming conventions of these classes is the key to using it efficiently.

A quick overview of commonly used tools

The class names of Tailwind are usually in the format of “property-value”, and the values are defined according to the scale of the design system (such as 0, 1, 2, 4, 6, 8...). For example:
- Spacing:m-4(margin: 1rem),p-2(padding: 0.5rem)mt-8（margin-top: 2rem）.
- Typography:text-lgfont-size: 1.125remfont-bold.font-weight: 700)text-gray-800(Color: #2d3748).
- Background and border:bg-blue-500(background-color),border，rounded-lg（border-radius: 0.5rem）.
- Layout:flex，items-center(alignment-items: center)justify-between（justify-content: space-between）.

Implement a responsive layout

Tailwind uses a “mobile-first” responsive design strategy. The default classes are designed for mobile devices (small screens). To apply styles to larger screens, you need to use responsive prefixes. md:、lg:、xl:、2xl:。

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

These breakpoints can be set in the Debug toolbar. tailwind.config.js The document's theme.screens Customize some parts. A typical responsive button style example is as follows:

<button class="text-sm bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 md:text-base lg:py-3 lg:px-6">
  响应式按钮
</button>

In this example, the button uses a small font on mobile devices.text-sm) on a medium-sized screen (md:For font sizes of 14 points and above, use the basic font size.md:text-base) on the big screen.lg:It has a larger inner margin on the top.lg:py-3 lg:px-6The hover effect is achieved by hover: Variant implementation. This way of declaratively writing responsive logic in HTML is very intuitive.

Custom configuration and advanced usage

The strength of Tailwind lies in its high degree of customizability. Through configuration files, you can extend or completely overwrite its default theme.

Recommended Reading Unlock the powerful features of Tailwind CSS: A comprehensive guide to the utility-first CSS framework。

Expand the theme configuration

tailwind.config.js This is the core of customization. You can do it in the Settings app. theme.extend When adding new values to an object, these values will be merged with the default theme rather than overwriting it. For example, adding a new brand color and custom spacing:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        'brand': '#5c6ac4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

After the configuration is completed, you can use it in your project bg-brand and w-128 Such a class. In the configuration content The field is crucial. It is used to specify which files Tailwind should scan for “tree-shaking” optimization, removing all unused style classes during the production build. This ensures that the CSS files are minimized.

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

Create a reusable component class

Although it is encouraged to use utility classes directly in HTML, for complex style combinations that are frequently repeated in a project, they can be extracted into component classes. There are several ways to achieve this:

1. Use @apply Instructions: In the CSS file, you can use @apply Combine multiple utility classes into a new class.

    .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, you can use it in HTML. <button class="btn-primary">。

2. Use JavaScript framework components: In frameworks such as React, Vue, or Svelte, the best practice is to encapsulate these style combinations into a reusable UI component (such as <). <Button>In this way, we can not only maintain the flexibility of Tailwind, but also gain the maintainability of components.

Moreover, Tailwind has a rich ecosystem of plugins, such as the official plugins @tailwindcss/forms(Optimize the form style),@tailwindcss/typography(Used for the layout style of the article content) and so on, which can further expand its functionality.

summarize

Tailwind CSS has completely transformed the way we write CSS by providing a set of fine-grained atomic tool classes. It eliminates the constraints of predefined components, giving developers ultimate flexibility and full control over design details. Its “mobile-first” responsive design, powerful customization capabilities, and the ability to generate extremely small CSS files through tree-shaking optimization make it ideal for a wide range of scenarios, from rapid prototyping to large-scale production projects. Learning and adapting to its class naming conventions takes some time, but once mastered, you'll gain unprecedented speed and consistency in UI development. In conjunction with modern front-end toolchains, Tailwind CSS is undoubtedly a powerful tool for building modern, high-performance, responsive user interfaces.

FAQ Frequently Asked Questions

There are many class names in Tailwind, and the HTML code looks messy. What should I do?

This is indeed a common concern for beginners. As the complexity of the project increases, the class names in HTML may become longer. The best practice to solve this problem is to combine the idea of component-based development. In frameworks such as React and Vue, you should encapsulate UI blocks into reusable components. In this way, the lengthy class names are isolated within the component's template or render function, and a concise component interface (such as <) is provided to the outside world. <Card>、<Navbar>In addition, make reasonable use of it. @apply Extracting duplicate style combinations from the instructions can also make HTML more concise.

Will Tailwind CSS increase the final package size?

On the contrary, Tailwind CSS can usually significantly reduce the size of CSS in the production environment. The key lies in its “Shake Tree Optimization” mechanism. By configuring it properly, tailwind.config.js The translation of the Chinese sentence into English is as follows: \nIn the content Fields, Tailwind's build tool will analyze your project files (HTML, JSX, Vue, etc.), identify all the tool classes that are actually used, and only pack these styles into the final CSS file. This means that no matter how large Tailwind's source code library is, the CSS your users download will only contain the styles they need, typically ranging from a few KB to over 10 KB.

How to modify Tailwind's default color scheme or spacing system?

It's entirely possible to do this by making some adjustments tailwind.config.js The file is customized. theme.extend Adding new values to an object will extend the default theme. If you want to completely overwrite a theme key (such as <), you can do so by specifying a new value for that key in the new theme file. colors Or spacingIf the user selects the "Add new task" option in the pop-up window, they can directly add a new task in the task list. theme Below (instead of) extend To define the key, the new definition will completely replace the default value. For example,theme: { colors: { primary: '#ff0000' } } All default colors will be removed, leaving only those you have defined. primary Color.

Which UI libraries or frameworks are Tailwind CSS suitable for use with?

Tailwind CSS works seamlessly with almost all modern front-end frameworks, including React, Vue, Angular, Svelte, Next.js, Nuxt.js, Gatsby, etc. Its styles are pure CSS classes, not dependent on any specific JavaScript runtime. Therefore, you can use it anywhere you can write HTML. Many popular UI component libraries, such as Headless UI (the official style-free component library) and DaisyUI (a Tailwind-based component library), are designed specifically for Tailwind and can be seamlessly integrated to further enhance development efficiency.