Learning Tailwind CSS: Building Modern Responsive Web Pages from Scratch

What is Tailwind CSS?

Tailwind CSS It is a feature-first CSS framework that helps developers quickly build custom user interfaces by providing a large number of composable utility classes. Unlike frameworks such as Bootstrap, which provide predefined components (such as buttons and cards), Tailwind does not offer any ready-made components, but instead provides a set of low-level atomic classes, such as .text-center、.p-4、.bg-blue-500Developers “assemble” the required styles by writing these classes directly on HTML elements.

The core advantage of this method is that it greatly improves development efficiency and eliminates the naming conflicts and style overrides commonly encountered in traditional CSS. You no longer need to rack your brain over class names or switch between multiple CSS files. At the same time, since the styles are directly embedded in HTML, the maintainability of the project is actually enhanced — you can immediately see what an element will look like in the final rendering. Additionally,Tailwind CSS It integrates responsive design, state variants (such as hover and focus), and dark mode support by default, making it a powerful tool for building modern web pages.

How to start using Tailwind CSS

start using Tailwind CSS There are multiple ways to do this, but the most recommended one is to install and configure it through its official CLI tool, which offers the greatest flexibility and control over the build process.

Recommended Reading Master Tailwind CSS: A Practical Guide and Best Practices from Beginner to Expert。

Install it via the CLI tool

First, you need to initialize it in the project. Tailwind CSSIt's best practice to install its CLI tool via npm or yarn and generate a configuration file. Run the following command in the root directory of the project:

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

This will create a folder named "images" in your project. tailwind.config.js The configuration file. Next, you need to create a main CSS file (for example, <). src/input.css), and use @tailwind Instructions for incorporating the various layers of Tailwind CSS.

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

Then, in tailwind.config.js In the configuration file, specify the path to your template files so that Tailwind can scan these files and generate the corresponding CSS.

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

Finally, run the CLI command to build the final CSS file.

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

This command will monitor changes to your source files and compile the required utility classes in real time. ./dist/output.css In the file. You just need to import this final generated CSS file into HTML.

Recommended Reading Ultimate Tailwind CSS Tutorial: Building a Modern, Responsive UI from Scratch。

\nCore Practical Classes and Responsive Design

Tailwind CSS The practical category covers almost all CSS properties, including layout, spacing, typography, color, borders, and effects. Its naming rules are intuitive and consistent, such as using < for spacing. p-{size} It indicates the inner margin (padding).m-{size} It indicates the outer margins (margin); the width and height are used. w-{size} and h-{size}。

Responsive design is one of Tailwind's strengths. It adopts a mobile-first breakpoint system. The default breakpoints are as follows:sm(640px)md(768px)lg(1024px)xl(1280px)2xl(1536px). To apply styles to different screen sizes, simply add the corresponding breakpoint prefix before the utility class.

For example, the following code creates a container that is stacked on mobile devices by default and arranged in a horizontal manner on medium-sized screens and larger ones:

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

<div class="flex flex-col md:flex-row">
  <div class="p-4 bg-blue-100 md:w-1/2">The content on the left side</div>
  <div class="p-4 bg-green-100 md:w-1/2">The content on the right side</div>
</div>

In this example,flex-col This is the default style (for mobile devices).md:flex-row It means that... md For screens with a breakpoint and above, the direction of the flexible container changes to rows. Similarly, the width md:w-1/2 It only works on screens of medium size and above.

Custom themes and plugins

even though Tailwind CSS A set of exquisite default design systems is provided, but in order to ensure brand consistency, customizing themes is essential. This is mainly achieved by making modifications. tailwind.config.js In the document, theme It can be partially achieved.

Extension of the default configuration

You can do it on theme.extend Adding new values to an object does not overwrite the default values, but rather extends them. For example, adding custom colors, fonts, or spacing:

Recommended Reading Learning Tailwind CSS: Building a modern responsive website from scratch。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7e22ce',
      },
      fontFamily: {
        'sans': ['Inter var', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

After customizing it, you can use it in HTML. text-brand-primary、font-sans and p-84 Such a class.

Use official and community plugins

Tailwind CSS The plugin system allows you to create your own utility classes. The official website provides some very practical plugins, such as @tailwindcss/forms（used to beautify form elements）@tailwindcss/typography(Used to provide beautiful typography for uncontrollable HTML content.) After installation, you just need to add the following code to the configuration file: plugins Just introduce it into the array.

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

npm install @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
    // ... 其他插件
  ],
}

After that, you can use it on any container. prose The class ensures that the HTML content inside it automatically receives a beautiful and well-formatted layout.

Build complex components

After mastering the basics, you can start building complex, reusable components. Although Tailwind encourages styling directly in HTML, for components that are frequently used in large projects, it's better to use < @apply It's also a good practice to extract common styles in CSS using directives.

For example, you can define a custom button style:

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-brand-primary 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 transition duration-150 ease-in-out;
}

Then, directly use this class name in HTML:

<button class="btn-primary">点击我</button>

This approach combines the flexibility of practical classes with the maintainability of traditional CSS. For projects based on JavaScript frameworks (such as React and Vue), you usually write these style combinations directly into the component templates, thus tightly encapsulating the styles, structure, and logic together.

summarize

Tailwind CSS Through its function-first, utility-driven paradigm, it has completely transformed the way front-end developers write styles. It provides all the tools needed to build modern, responsive web pages from scratch, while ensuring development efficiency and design consistency through intuitive naming, a powerful responsive system, and highly customizable configurations. Whether it's rapid prototyping or building large-scale production-level applications, Tailwind can significantly improve workflow. By mastering its core concepts, responsive prefixes, theme configurations, and component construction methods, you will be able to efficiently create unique and beautiful user interfaces.

FAQ Frequently Asked Questions

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

No. In a production environment,Tailwind CSS Use the PurgeCSS (now integrated and called “content scanning”) technology. It scans all the template files (such as HTML, JSX, Vue) specified in your configuration file and only packs the actually used utility classes into the final CSS file. This ensures that the generated CSS file is very concise, typically only a few KB to over 10 KB in size.

In team projects, how can we maintain consistency in style?

Tailwind CSS It promotes consistency by providing a restricted design system (such as a fixed color palette and spacing ratio). The team can achieve consistency by sharing and strictly following a carefully customized design system. tailwind.config.js The configuration file is used to ensure consistency. In addition, it can be used in combination with other methods. @apply Use the instruction or the component system of the JavaScript framework to create a reusable and style-consistent UI component library.

How does Tailwind CSS compare to traditional CSS-in-JS solutions (such as styled-components)?

The two have different goals, but they can complement each other.Tailwind CSS They mainly work at the HTML/template level, combining styles through class names to emphasize practicality and development speed. CSS-in-JS, on the other hand, dynamically generates styles at runtime in JavaScript, excelling at handling highly dynamic, state-dependent styles, and providing perfect style isolation. In actual projects, developers can choose one based on their needs, or even use them in combination—for example, using Tailwind to handle basic layouts and common styles, and CSS-in-JS to handle complex dynamic logic styles.

Do I need a strong foundation in CSS to learn Tailwind CSS?

You need basic knowledge of CSS, but you don't need to be an expert. In fact,Tailwind CSS The class names correspond closely to the CSS properties (for example, flex, justify-center, text-whiteThe process of learning Tailwind is also about mastering the best practices of CSS. For beginners, it can serve as a great “crutch”, helping them avoid the common pitfalls of writing complex CSS directly. As you become more proficient with Tailwind classes, your understanding of underlying CSS will deepen simultaneously.