Tailwind CSS: A Practical Guide to Building Modern Responsive Websites, from Beginner to Expert

In the field of front-end development,Tailwind CSS With its unique Utility-First concept, it has quickly become the preferred tool for building modern user interfaces. By providing a large number of fine-grained, single-purpose CSS classes, it enables developers to quickly build any design directly in HTML while keeping the stylesheet as minimal as possible. Unlike traditional CSS frameworks,Tailwind CSS It doesn't provide pre-made components (such as buttons and cards), but rather offers a set of basic tools for building components, which gives developers great flexibility and control. This article will take you from the basic concepts to a deeper understanding, and help you master their use. Tailwind CSS A complete process for efficiently building responsive and accessible modern webpages.

What is Tailwind CSS and its core advantages?

Tailwind CSS It is a CSS framework that prioritizes functionality, and it includes a large number of features such as… flex、pt-4、text-center and rotate-90 Such classes can be used in combination directly in HTML tags to build any design.

The philosophy of prioritizing practicality

Its core philosophy is “practicality first.” This means that the framework provides only the most basic, single-function style classes, rather than encapsulated components with specific appearances. For example, to create a button with padding, a blue background, and white text, you don’t need to write custom CSS or use a component with a specific name. btn-primary Instead of using components from a specific library, we directly combine them in HTML. px-4 py-2、bg-blue-600 and text-white These are tools. This approach greatly accelerates the prototype design and development process, as you don't have to switch back and forth between HTML and CSS files.

Recommended Reading Introduction to Tailwind CSS and Practical Application: Building a Modern Responsive Website from Scratch。

Analysis of the main advantages

utilization Tailwind CSS It brings multiple advantages. Firstly, it greatly restricts your design choices, avoiding arbitrary values, making the design system more consistent and maintainable. Secondly, since the styles are directly written in HTML, you no longer need to rack your brains to name CSS classes for components, and it also avoids the bloating of CSS files caused by unused styles. Finally, with its powerful responsive design and state variants (such as hover and focus), it can easily create interfaces that adapt to various screen sizes and interaction states.

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 →

How to start using Tailwind CSS

start using Tailwind CSS There are various methods, but the most recommended one is to use its official CLI tool or integrate it with front-end build tools such as Vite and Webpack.

Install it via the build tool

For most modern front-end projects, installing and configuring PostCSS via npm is the best practice. First, install it using npm or yarn. tailwindcss And its dependencies.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This will create two files:tailwind.config.js and postcss.config.js. In tailwind.config.js In this case, you need to configure it. content The option specifies which files contain your utility classes, so that Tailwind CSS At the time of production build, we can use “shake the tree” optimization to remove unused styles.

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

Introduce basic styles

Next, in your main CSS file (for example… src/index.css Or src/app.cssIn this article, we introduce Tailwind CSS The instructions.

Recommended Reading Tailwind CSS: A Practical Guide to Building Modern Websites, from Beginner to Expert。

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

Now, run your build process (for example, npm run dev），Tailwind CSS It will process these instructions and generate all the corresponding tool classes, so you can start using them in the HTML or JSX of your project.

Core Features and Practical Tips

Master Tailwind CSS The core functions are the key to efficient development, mainly including responsive design, state variants, and customized configurations.

Implementing responsive design

Tailwind CSS We adopt a mobile-first breakpoint system. The default breakpoint prefix is, for example, < sm:、md:、lg:、xl:、2xl: It allows you to apply styles to different screen sizes. For example,text-base md:text-lg It indicates the use of larger fonts on medium and large screens or higher resolutions.

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="text-center p-4 md:text-left md:p-8 lg:flex">
  <!-- 内容 -->
</div>

State Variants and Pseudoclasses

The framework includes built-in support for common pseudo-classes and states, and you can simply add the corresponding prefixes before the utility classes. For example,hover:bg-gray-100 It will change the background color when the mouse is hovered over it.focus:ring-2 focus:ring-blue-500 A blue halo will be added when the element gains focus, which is very useful for achieving accessibility. It can also be used in combination with other elements, such as dark:bg-gray-800 dark:hover:bg-gray-700 To achieve the interactive effect in dark mode.

Customization and Expansion

even though Tailwind CSS It provides a wealth of default design tokens (colors, spacing, font size, etc.), but you can fully customize them. By modifying them, you can create a unique design that perfectly suits your needs. tailwind.config.js In the document, theme For some parts, you can extend or overwrite the default theme. For example, you can add custom colors or adjust the spacing ratio.

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

In addition, you can also use @layer The instruction extracts component classes in CSS and encapsulates commonly used tool classes into new classes to avoid repetition in HTML.

Recommended Reading Practical Guide to Tailwind CSS: A Comprehensive Tutorial for Building Modern Responsive Websites。

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-600 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;
  }
}

Building a practical project: a responsive navigation bar

Let's apply the above knowledge by building a common responsive navigation bar. This navigation bar is displayed horizontally on large screens, and collapses into a hamburger menu on small screens.

Building the HTML structure

First, we establish the basic HTML structure, use semantic tags, and apply initial utility classes.

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

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 网站Logo/品牌 -->
      <div class="flex-shrink-0">
        <a href="#" class="text-white text-xl font-bold">My brand</a>
      </div>
      <!-- 桌面端导航链接（默认隐藏，中等屏幕显示） -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900">Home</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Regarding</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Service</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contact</a>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
          <!-- 汉堡菜单图标（简化） -->
          <span class="sr-only">Open the main menu</span>
          <svg class="block h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端菜单（默认隐藏） -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Regarding</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Service</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contact</a>
    </div>
  </div>
</nav>

Add interactive features

The above HTML provides a visual structure and a responsive layout, but the switching of the mobile menu requires JavaScript to implement it. We can add a simple script to switch between the two views. hidden Class.

// 例如在您的JS文件中
document.querySelector('nav button').addEventListener('click', function() {
  const menu = document.getElementById('mobile-menu');
  menu.classList.toggle('hidden');
});

This example shows how to do it using only Tailwind CSS Using these tools, we can quickly build a component with responsive layout and basic visual effects, while keeping the interaction logic simple and separate.

summarize

Tailwind CSS Through its practical-first methodology, it has completely transformed the way developers write CSS. By providing a complete and consistent set of design system tools, it has significantly improved the efficiency and consistency of UI development. From convenient installation and configuration to powerful responsive and state-variant support, and deep customization capabilities,Tailwind CSS It provides a powerful and flexible solution for building modern web pages, ranging from simple pages to complex applications. Although initial learning requires memorizing a large number of class names, once mastered, its development speed and ability to precisely control design are unmatched by traditional CSS methods. Embrace it! Tailwind CSSThis means embracing a faster and more maintainable front-end development workflow.

FAQ Frequently Asked Questions

Will Tailwind CSS make the HTML code become bloated?

This is indeed a common concern. Using Tailwind CSS After that, there will be more class names in HTML, which might make it look more complicated.

However, this “redundancy” brings huge benefits: the size of your CSS files will become very small in the production environment, because Tailwind It will only generate the styles you have actually used through the “shake the tree” technique. At the same time, you don't need to write and maintain custom CSS class names anymore, and it also eliminates the accumulation of unused style codes. In many projects, the final trade-off is positive.

How to add custom CSS to Tailwind CSS?

In most cases, you don't need to write custom CSS, because almost all styles can be achieved through a combination of utility classes.

If you need to add custom styles, there are mainly three ways to do it: Firstly, in the tailwind.config.js The document's theme.extend First, expand the theme (such as custom colors and spacing). Second, use < in your CSS file. @layer Instructions:@layer components, @layer utilitiesYou can add new component classes or tool classes by clicking on the "Add" button in the toolbar. Finally, you can also write ordinary CSS anywhere and use it. @apply The instruction injects the existing tool classes into your custom rules.

Is it suitable for use with frameworks such as React and Vue?

It's absolutely perfect, and it could even be said to be a perfect match.Tailwind CSS It integrates very well with modern front-end frameworks such as React, Vue, and Svelte.

In these component-based frameworks, you can encapsulate the HTML structure composed of utility classes into reusable components, which perfectly solves the problem of “HTML bloat”. For example, you can use < Tailwind CSS For style buttons, you only need to define them once. Button The components are then reused throughout the entire application, ensuring a single source for the style and maintaining the simplicity of the HTML code.

How to optimize the size of Tailwind CSS in a production environment?

Tailwind CSS It is equipped with powerful production optimization functions. The core is “shaking the tree” or “removing unused styles”.

You need to make sure that… tailwind.config.js The content In the configuration, all source file paths containing tool class names (such as HTML, JSX, and Vue component files) are correctly specified. When running the production build command (which typically includes <), the tool classes are automatically included in the build process, ensuring that all required files are correctly compiled and bundled into a single output file. This ensures that the final output meets the specified requirements and is ready for deployment to the production environment. NODE_ENV=production) whenTailwind CSS These files will be scanned, and only the CSS corresponding to the classes found in them will be generated, which greatly reduces the size of the final output CSS file. Typically, the size of the CSS can be reduced from hundreds of KB to around 10KB.