Build a responsive website from scratch: A step-by-step guide to mastering the core concepts and practical techniques of Tailwind CSS

In modern front-end development, quickly creating user interfaces that are both aesthetically pleasing and responsive is a core requirement. Traditional methods of writing CSS often come with issues such as bloated style sheets, naming conflicts, and difficulties in maintenance. Tailwind CSS As a practical, atomic CSS framework that prioritizes usability, it offers a large number of finely-grained utility classes, enabling developers to quickly build any desired design directly in HTML. It is not a pre-defined set of components; rather, it serves as a set of fundamental tools for creating custom designs. This gives it significant advantages in terms of flexibility and performance.

The core philosophy and working principles of Tailwind CSS

Understanding Tailwind CSS The first step in using Tailwind CSS is to understand its philosophy of “practicality first.” Unlike frameworks like Bootstrap, which provide ready-made buttons and card components, Tailwind offers thousands of tiny utility classes, each responsible for only one single CSS property.

Practical and prioritized atomic classes

These utility classes are what we call “atoms.” For example,.mt-4 in the name of margin-top: 1rem;，.text-blue-500 in the name of color: #3b82f6;By combining these atomic classes, you can declaratively construct complex component styles in HTML, without having to repeatedly switch between the CSS and HTML files. This approach significantly speeds up the prototyping and development iteration process, and by limiting the range of available options, it ensures consistency in the design.

Recommended Reading Mastering Tailwind CSS: A Practical Guide to Learning and Mastering this Front-End Style Framework from the Basics。

Configuration-based design system

Tailwind CSS The strength of this system lies in its high degree of customizability. All of this is made possible through the files located in the project’s root directory. tailwind.config.js The configuration file is used for management. In this file, you can define the design tokens for the entire project, such as colors, spacing, fonts, breakpoints, etc. For example, you can define the brand’s primary color as follows: primary: '#1D4ED8'Then, throughout the entire project… bg-primary Or text-primary Use it. This configuration-driven approach makes it extremely easy to maintain a unified design system.

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 →

Optimization of the production environment

Tailwind CSS During the development phase, a large stylesheet containing all the utility classes is introduced. However, this does not mean that the final production package will also be so bulky. Tailwind comes with PurgeCSS (now known as the “Purge” feature), which intelligently analyzes your project’s files (such as HTML, JavaScript, Vue, React components), identifies all the utility classes that are actually being used, and removes any unused CSS code. The resulting CSS file typically weighs only a few KB, ensuring excellent loading performance.

Configure and install from scratch.

start using Tailwind CSS There are several ways to install it, but the most recommended method is through its PostCSS plugin, which allows for seamless integration with other modern build tools such as Vite and Webpack.

Install it using PostCSS

First, install the necessary dependencies using npm or yarn:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This command will generate a default one. tailwind.config.js File. Next, you need to modify the CSS entry file of your project (for example, the main CSS file that is imported by other CSS files). src/styles.css Or src/index.cssIntroduce the Tailwind CSS directives within the code:

Recommended Reading The Ultimate Tailwind CSS Guide: From Beginner to Expert – Building Modern, Responsive Webpages。

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

Finally, make sure your build process (for example…) postcss.config.jsIt has already been configured. tailwindcss and autoprefixer Plugins. After completing these steps, you can start using Tailwind’s utility classes in your HTML code.

Analysis of Key Configuration Items

The generated tailwind.config.js Files are at the heart of controlling the behavior of a framework. One of the most important configurations is… content Fields (which may have been in older versions…) purgeIt tells Tailwind which files to scan in order to find the class names being used, so that optimizations can be applied in the production environment.

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

You can do it on theme.extend Adding custom configurations to an object without overwriting the default values set by Tailwind is a safe way to extend its functionality.

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

Building responsive layouts and interactive components

Tailwind CSS The responsive design follows the “mobile-first” principle, where the utility classes are applied by default to all screen sizes. The classes with prefixes (such as…) md:, lg:) is used to take effect at larger breakpoints.

Mobile-first responsive breakpoints

Tailwind comes with five default breakpoints:sm (640px), md (768px), lg (1024px), xl (1280px), xl (1536px). To create a layout that stacks on mobile and sits side by side on medium-sized screens, you can write it like this:

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

Here,flex-col This is the default (mobile) style.md:flex-row and md:w-1/2 It will take effect when the screen width reaches 768px.

Recommended Reading How to use Tailwind CSS to build modern, responsive user interfaces。

Variants of states such as hovering and focusing

In addition to the responsive prefix, Tailwind also provides a rich set of state variation prefixes, which allow you to easily add styles to interactive states. The most common ones include… hover:, focus:, active:, disabled: etc.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-300">
  点击我
</button>

This button changes its background color to a darker shade when hovered over it, and it gets a blue circular outline when it receives focus—without the need to write any custom CSS at all.

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

Build a card component

By combining utility classes, we can quickly build a beautiful card component:

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white">
  <img class="w-full" src="/img/card-top.jpg" alt="Image description">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Card title</div>
    <p class="text-gray-700 text-base">
      This is an example of a card component built using Tailwind CSS. It is entirely composed of utility classes and does not require any custom CSS.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"># Tag 1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"># Tag 2</span>
  </div>
</div>

Advanced Tips and Custom Extensions

Once you become familiar with the basic usage, you can take advantage of some advanced features to improve development efficiency and code maintainability.

Extracting components and using the @apply directive

Although “utility-first” encourages using classes directly in HTML, for complex style combinations that are repeated throughout a project, you can use @apply In CSS, instructions are extracted and turned into component classes to avoid duplication. This is usually done… @tailwind components; Execute the command after that.

.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. class="btn-primary"Please note that overuse… @apply We will revert to the old method of writing custom CSS, and it should be used with caution only in cases where the code can truly be reused.

Deeply customizable design tokens

In tailwind.config.js The theme.extend For certain parts, you can add any custom values you wish. For example, you can specify a custom color and a custom spacing:

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

After that, you can use it. bg-brand, text-brand and w-128 Such a class.

Use the official plugin ecosystem.

Tailwind has a rich ecosystem of plugins. For example, you can install… @tailwindcss/forms To obtain better styling for form elements, or to install the necessary components, you can follow these steps: @tailwindcss/typography It provides beautiful formatting styles for rendered Markdown or CMS content. Simply install the plugin and configure it in the configuration file. plugins Just introduce it into the array.

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

summarize

Tailwind CSS Tailwind CSS has truly revolutionized the way developers write CSS by adopting a prioritized, atomic class paradigm. By applying fine-grained utility classes directly to HTML elements, it significantly enhances the efficiency and consistency of UI development. Its design system, which relies on configuration files, makes it easy to maintain brand-specific styles, while its powerful Purge feature ensures that the final product is highly performant. Whether it’s handling responsive layouts or complex interactive behaviors, Tailwind offers clean and elegant solutions. Although it may require some initial memorization of class names, once mastered, it becomes a powerful tool that can greatly improve both the team’s development experience and the speed of product delivery.

FAQ Frequently Asked Questions

What are the main differences between Tailwind CSS and Bootstrap?

The core philosophies of the two are completely different. Bootstrap is a framework that provides pre-built components such as buttons, navigation bars, and modal boxes, which you can customize by modifying variables and making minor adjustments. It is designed to be “ready to use out of the box,” but in-depth customization can sometimes be cumbersome.

Tailwind CSS Tailwind CSS is an underlying toolkit that does not provide any pre-made components with default styles. Instead, it offers the “raw materials” (tool classes) necessary for building these components. This gives developers complete freedom in design, allowing them to create unique interfaces without being constrained by the default styles of the framework. While Tailwind requires more initial setup work, it offers a higher level of flexibility and customization.

In large projects, does having a large number of class names in HTML make it difficult to maintain the code?

This is a common concern, but practice has shown that in most cases, the opposite is true. Since styles are applied locally to each element, you don’t have to worry about conflicts between global styles. To find and modify the style of a particular element, you simply need to look at its HTML code – there’s no need to jump between multiple CSS files.

For truly duplicate style patterns, you can use… @apply Extract the instructions into component classes, or use modern front-end frameworks (such as React or Vue) to encapsulate the UI into reusable components. This way, although there may be many class names in the HTML, the logic remains clear and the maintainability is improved.

Will the styles from Tailwind override my own CSS?

Tailwind CSS Its styles have a specific priority. Its utility classes, like any other CSS classes, follow the cascading and specificity rules of CSS. Usually, because Tailwind's class definitions are very specific, they may have a higher priority.

If you need to override Tailwind's styles, you can simply use a selector with higher specificity, or use CSS's !important It is not recommended to do so. A better approach is to use Tailwind’s configuration system to customize design tokens from the source, or to make sure that your custom CSS is imported after the Tailwind utility classes in your style sheet.

How to add custom CSS to Tailwind?

There are several ways to add custom CSS. For global styles, you can write them directly in the CSS file that imports the Tailwind directives. For a reusable pattern based on tool classes, you can use… @apply Instructions.

In addition, you can also create brand-new CSS classes and use them. @layer Instructions to put them in Tailwind base, components, or utilities Within the layers, this allows them to work more seamlessly with other Tailwind features, such as responsive variants and state variants. For example:@layer components { .my-custom-class { ... } }。