The Ultimate Beginner’s Guide to Tailwind CSS: Build a Modern Responsive Website from Scratch

\nCore concepts and working principles

Tailwind CSS is a utility-first CSS framework that focuses on breaking down styles into small, individual, and reusable atomic classes. Unlike frameworks like Bootstrap, which provide pre-defined components (such as buttons and cards), Tailwind offers a set of basic building blocks that can be freely combined to create any desired design elements. <code>text-center</code>、<code>p-4</code>、<code>bg-blue-500</code> Such underlying utility classes allow for the construction of any design by simply combining these classes directly within HTML.

Its working principle is based on a configuration file. In the root directory of the project, this configuration file is applied by executing certain commands or scripts. npx tailwindcss init The command can generate something called… tailwind.config.js The configuration file for Tailwind CSS. This file serves as the “engine” of Tailwind, where developers can customize the design system by defining various design elements such as colors, spacing, fonts, and other design tokens. When the project is built, Tailwind scans your HTML, JavaScript, or other template files to identify all the utility classes that are being used, and then it generates the corresponding CSS styles only for those classes. This process is known as “Tree Shaking,” which ensures that the resulting CSS file is as compact as possible.

Environment Setup and Project Configuration

There are several ways to integrate Tailwind CSS into your project. The most flexible and recommended method is to do so through PostCSS, which is compatible with modern build tools such as Vite, Webpack, and Rollup.

Recommended Reading Why Choose Tailwind CSS: An Efficient and Practical Solution for Modern Web Development。

First, install Tailwind CSS and its dependencies using npm or Yarn:

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

This command will generate what was mentioned above. tailwind.config.js File. Next, you need to create a PostCSS configuration file within the project (for example, postcss.config.js), and will tailwindcss and autoprefixer Add as a plugin:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

The most crucial step is to create your main CSS file (for example… src/styles.css Or app/globals.css), and use @tailwind The command introduces the core styles of Tailwind CSS:

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

Finally, in your build tool configuration, make sure that the CSS file is being included correctly.

Practical Class Syntax and Responsive Design

The naming convention for Tailwind’s utility classes is intuitive and consistent, following the “property-modifier-value” paradigm. For example,<code>mt-4</code> Express margin-top: 1rem；<code>text-lg</code> Express font-size: 1.125rem；<code>hover:bg-gray-100</code> Indicates that the background color should be applied when the mouse is hovered over the element.

Recommended Reading In-Depth Understanding of the Tailwind CSS Framework: From Practical Tools to Modern Front-End Development Practices。

Responsive design is a strong point of Tailwind. The framework comes with five built-in breakpoints by default:sm (640px)md (768px)lg (1024px)xl (1280px) and 2xl (1536px). You can easily create a responsive layout by simply adding a breakpoint prefix before the class name in your CSS. For example,<code>text-center md:text-left</code> The text should be aligned to the left on screens with a size of medium or larger; otherwise, it should be centered.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- 移动端一列，平板两列，桌面端四列 -->
</div>

In addition to the responsive prefixes, there are also status modifiers, such as… hover:、focus:、active:、disabled: Wait, these prefixes are used to manage the interaction state. By combining these prefixes, you can create very efficient and declarative style codes.

Custom and Advanced Features

Although Tailwind CSS is ready to use out of the box, its true power lies in its high level of customizability. All customizations are... tailwind.config.js Completed in the file.

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

You can extend or override the default theme. For example, you can add custom colors or modify the spacing ratios:

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

The framework supports its use. @apply The instruction involves extracting repetitive sets of utility classes from CSS and encapsulating them into custom CSS classes. This is useful for style combinations that appear frequently and are consistent across a project.

.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;
}

In addition, by configuring... content Tailwind allows for precise scanning of your project files (such as HTML, JSX, Vue, Svelte, etc.), ensuring that only the styles you actually use are generated. This is crucial for performance optimization in best practices of 2026.

Recommended Reading Core Concepts and Practical Patterns of Tailwind CSS: From Atomic Classes to Responsive Design。

summarize

Tailwind CSS liberates style development from the traditional context of writing custom CSS, transforming it into a process of rapid combination and iteration within the markup language, thanks to its prioritization-based philosophy. It reduces the cognitive burden associated with naming individual elements, ensures consistency through a constrained design system, and guarantees excellent performance through intelligent, build-time optimizations. Whether you’re creating quick prototypes or large-scale production applications, Tailwind offers an efficient, maintainable, and highly customizable front-end styling solution. Mastering its core configurations, responsive syntax, and customization capabilities is a crucial step in building modern, responsive websites.

FAQ Frequently Asked Questions

How to prevent the CSS files generated by Tailwind from becoming too large?
By configuring it correctly tailwind.config.js In the document, content Make sure the field contains all the paths to your template files (for example: ./src/**/*.{html,js,ts,jsx,tsx,vue,svelte}Tailwind’s JIT (Just-In-Time) compiler will only scan these files and generate the utility class styles that you actually use in your code, thereby keeping the final CSS file size as small as possible.

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

Can it be used in the same project alongside other CSS frameworks (such as Bootstrap)?

Sure, but it’s not recommended. Mixing style classes from different frameworks on the same element can lead to unpredictable and difficult-to-diagnose style conflicts. The best practice is to choose one framework or library to use exclusively. If you must use multiple frameworks, proceed with caution and use CSS’s cascading rules or increase the specificity of your selectors to manage style priorities.

How to handle dark mode in Tailwind CSS?

Tailwind CSS includes built-in support for a dark mode. First of all, tailwind.config.js Settings in... darkMode: 'class' Or darkMode: 'media'。media The mode will automatically switch according to the user's system preferences. The more commonly used mode is… class The “mode” allows you to manually modify the HTML content. <html> Or <body> Add or remove tags from the item. <code>dark</code> Use a class to control the mode. Afterwards, you can use it in front of the utility class. <code>dark:</code> Use prefixes to define the styles in dark mode, for example: <code>bg-white dark:bg-gray-800</code>。

Will using the `@apply` directive violate the principle of practicality and priority?

@apply Instructions should be used with caution. They are primarily suitable for extracting style combinations that are identical and appear multiple times within a project, such as brand-specific buttons, cards, or form input fields. Overusing them can lead to unnecessary complexity or errors in the processing of the data. @apply When creating complex component styles, one may indeed revert to the traditional method of writing CSS, thereby losing some of the advantages of practicality in favor of maintainability. The best practice is to use this approach only when it can truly reduce duplicate code and when the combination of styles is very stable. @apply。