Tailwind CSS: Getting Started and Practical Applications: Building Modern, Responsive Web Pages from Scratch

What is Tailwind CSS?

In the field of front-end development today,Tailwind CSS It has become an existence that cannot be ignored. It is not a traditional CSS framework, but rather a set of practical tools that prioritize functionality (a “Utility-First CSS Framework”). Unlike frameworks like Bootstrap, which provide predefined components such as buttons and cards,Tailwind CSS A large number of fine-grained, atomic CSS classes are provided, allowing developers to build any desired design by simply combining these classes directly on HTML elements.

Its core philosophy is a new practice of “separating concerns”: moving styles back from CSS files into the HTML markup itself. This might sound like a step backward, but in reality, it solves many of the problems associated with the traditional way of writing CSS, such as struggling to come up with appropriate class names, worrying about style conflicts, and having to manage increasingly large CSS files. By adopting this approach… Tailwind CSSYou only need to remember a set of unified, functional class names to quickly apply all styles such as padding, margin, color, font size, and layout.

Environment Setup and Basic Configuration

To get started using it… Tailwind CSSFirst of all, you need to integrate it into your project. The most recommended way to do this is by installing it using its official PostCSS plugin, as this will provide the best performance and development experience.

Recommended Reading Explore Tailwind CSS: A Practical Technical Guide from Beginner to Expert。

Install the core dependencies using the package manager.

First, initialize the project using npm or yarn and then install the necessary dependencies. Tailwind CSS And its dependencies. Execute the following command in the root directory of your 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 postcss autoprefixer
npx tailwindcss init

The first command was used to perform the installation. tailwindcss It is itself used for processing CSS. postcss… as well as adding browser prefixes to CSS properties. autoprefixerThe second command will generate a file named… tailwind.config.js This is the configuration file; it is used for customization. Tailwind CSS The core file.

Configure the core files and include the styles.

Next, configuration is required. tailwind.config.js The file should be specified accordingly. Tailwind CSS Which files should be scanned to generate the final CSS? This is crucial for enabling JIT (Just-In-Time) compilation mode and removing unused styles.

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

Then, in your main CSS file (for example… src/styles.css Or src/index.css) is introduced into Tailwind CSS The instruction:

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

Finally, make sure that your build tools (such as Vite or Webpack) have PostCSS configured to process this CSS file. If you are using a modern toolchain like Create React App or Vite, you usually just need to install the necessary dependencies and create a configuration file; these tools will handle the rest of the process automatically.

Recommended Reading Building a Modern Responsive Website with Tailwind CSS: A Guide from Beginner to Practitioner。

\nCore Practical Classes and Responsive Design

Master Tailwind CSS The key to understanding this framework lies in its naming conventions and the responsive prefix system it uses. The class names typically correspond directly to CSS properties, and there is also a scalable set of design tokens in place.

Common Naming Rules for Atomic Classes

Tailwind CSS The class name design is very intuitive. For example, setting the padding is done using… p-{size}which p in the name of padding，size These are preset size increments (for example, 0, 1, 2, 4, 6... correspond to 0rem, 0.25rem, 0.5rem, 1rem, 1.5rem...).mx-auto This indicates that the horizontal margin is set automatically, which is commonly used for centering blocks. Color classes, for example… bg-blue-500(Background color)text-gray-800(The text color); the numbers represent the intensity of the color.

The same pattern applies to text and size classes as well:text-lg Indicates bold font.font-bold Indicates bold text.w-64 Indicates a width of 16rem. Layout classes such as… flex, items-center, justify-between These properties directly correspond to the Flexbox properties, allowing you to create complex layouts without having to write any custom CSS.

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

Implement a mobile-first, responsive user interface.

Tailwind CSS Adopt a mobile-first breakpoint system. All utility classes are designed for mobile devices by default, and can be adapted for larger screens by adding prefixes. The built-in breakpoint prefixes include:sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px).

This means that you can write a responsive card container in the following way:

<div class="flex flex-col p-4 md:flex-row md:p-8 lg:p-12">
  <img src="..." class="w-full md:w-1/3" />
  <div class="mt-4 md:mt-0 md:ml-6 md:w-2/3">
    <h2 class="text-xl font-bold">caption</h2>
    <p class="text-gray-600">Content description….</p>
  </div>
</div>

In the example above, the elements are vertically stacked on mobile devices.flex-col) and has a smaller padding.p-4On screens of medium size and above, the elements are arranged horizontally.md:flex-row) and increase the padding.md:p-8On the larger screen, there is a larger padding inside the elements.lg:p-12The image width occupies 1/3 of the screen on medium-sized devices, while the right-side content area occupies 2/3 of the screen, with a left margin added. This approach clearly demonstrates the responsive design logic within the HTML structure.

Recommended Reading Mastering the core concepts of Tailwind CSS: From practical classes to responsive design in action。

Practical application: Building a responsive navigation bar

Let’s apply the knowledge we’ve learned by creating a common responsive navigation bar. On desktop, this navigation bar displays all the links horizontally; on mobile devices, it folds into a hamburger menu.

HTML Structure Building and Basic Styling

First, we build the basic HTML structure and apply some fundamental utility classes to define the layout, colors, and spacing.

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-white shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <!-- 品牌Logo -->
      <div class="flex-shrink-0">
        <span class="text-2xl font-bold text-blue-600">My brand</span>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:flex space-x-8">
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Regarding</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Service</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" id="menu-btn" class="text-gray-700 hover:text-blue-600 focus:outline-none">
          <!-- 汉堡菜单图标，这里用简单文字代替 -->
          <svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">...</svg>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单（初始隐藏） -->
  <div id="mobile-menu" class="md:hidden hidden">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium">Home</a>
      <a href="#" class="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium">Regarding</a>
      <a href="#" class="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium">Service</a>
      <a href="#" class="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium">Contact</a>
    </div>
  </div>
</nav>

Add interactive features and status classes.

The above HTML defines a hidden container for a mobile menu.class="md:hidden hidden"We need some simple JavaScript to switch its display mode.Tailwind CSS It offers a wide range of state variations, such as… hover:、focus:、active:We have already used it in the link. hover:text-blue-600 To achieve the hover effect.

Now, add the interactive script, which is usually placed before the end tag of the body:

<script>
  const menuBtn = document.getElementById('menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');

menuBtn.addEventListener('click', () => {
    // 切换 'hidden' 类来显示/隐藏菜单
    mobileMenu.classList.toggle('hidden');
    // 可选：为按钮图标添加旋转等动画效果，这里省略
  });
</script>

Up to this point, a fully functional responsive navigation bar has been completed. It makes full use of... Tailwind CSS Use practical classes to define styles, and apply these styles through responsive prefixes. md: and hidden The class is used to control the display logic on different screens, resulting in concise and well-intentioned code.

summarize

Tailwind CSS By adopting its unique methodology of prioritizing practical tools, this framework has completely transformed the way developers write and maintain styles. It eliminates the time and effort required to switch back and forth between HTML and CSS files, reduces the burden of naming custom class names, and ensures visual consistency through a constrained design system. Its built-in responsive design features, state management capabilities, and extensive customization options make the development process extremely efficient, whether creating quick prototypes or building production-grade applications.

Although it requires memorizing a large number of class names in the initial stage, the development speed will improve significantly once you become familiar with the naming conventions. More importantly, the resulting CSS files can be significantly reduced in size through the Purge mechanism, which addresses potential performance issues associated with traditional CSS. This is particularly beneficial for teams and individual projects that prioritize development efficiency, design consistency, and high performance.Tailwind CSS Undoubtedly, it is a highly valuable modern tool.

FAQ Frequently Asked Questions

The HTML generated by Tailwind CSS looks quite messy. How can I fix this?

Indeed, directly stuffing a large number of utility classes into HTML can reduce the readability of the template.

Tailwind CSS Multiple solutions have been provided. Firstly, it is possible to use… @apply The instructions involve extracting duplicate combinations of utility classes from CSS files and abstracting them into custom component classes. Secondly, in component-based frameworks (such as React or Vue), this “clutter” is naturally isolated within each component, which makes the style dependencies of those components much clearer. Lastly, good editor and plugin support (such as Tailwind CSS’s IntelliSense) can greatly enhance the coding experience.

How does the performance of Tailwind CSS compare to that of traditional CSS or Bootstrap?

In terms of performance,Tailwind CSS They usually have significant advantages, especially in production environments.

This is mainly due to its purge mechanism (which was enabled by default in its JIT engine by 2026). The build tools scan your source code and only include the actual classes that are used in the final CSS file, resulting in a very small CSS package. In contrast, traditional, manually written CSS or importing the entire Bootstrap library often generates a large amount of unused style code. Therefore, with the correct configuration… Tailwind CSS Projects often result in CSS files that are only a few KB in size.

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

Customizing design tokens is very simple; it mainly involves modifying the files located in the project’s root directory. tailwind.config.js File implementation.

You can do that within the configuration object. theme.extend Some default values can be added or overridden. For example, to add a brand-specific color and adjust the spacing ratio, you can configure it as follows:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#5c6ac4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

After that, you can use something like… bg-brand and w-128 Such a class. This design ensures that the project can be perfectly synchronized with the design system.

In team projects, how can we ensure consistent use of Tailwind CSS?

Ensuring consistency requires the use of tools and established conventions.

First of all, a unified configuration file. tailwind.config.js It itself serves as a source for design guidelines. Secondly, the Prettier plugin can be used (for example). prettier-plugin-tailwindcssThis mechanism automatically sorts class names to establish a consistent writing order. During code reviews, it is possible to check for any unnecessary mixing of different class naming conventions. @apply And native CSS. For very complex components, the team can agree to use a specific directory for their implementation. @apply Create well-defined component classes and manage them as a shared styling API.