Tailwind CSS Getting Started Guide: Building Modern, Responsive Webpages from Scratch

What is Tailwind CSS?

Tailwind CSS is a CSS framework that prioritizes functionality. It helps developers quickly build custom user interfaces by providing a large number of combinable, practical utility classes. Unlike frameworks like Bootstrap, which offer pre-defined components such as buttons and cards, Tailwind CSS does not provide any components with fixed styles. Instead, it offers a series of small, single-purpose classes. text-center、bg-blue-500、p-4 etc.

开发者通过直接在 HTML 的 class 属性中组合这些类来构建任何设计。这种方法消除了在 CSS 文件和 HTML 文件之间频繁切换的需要，将样式直接写在标记语言中，从而极大地提高了开发速度。同时，它通过约束设计 token（如颜色、间距、字体大小），强制执行了设计系统的一致性。

Its core strengths lie in its high degree of customizability and extreme flexibility, which are achieved through the use of configuration files. tailwind.config.jsYou can easily define your own design system, including color palettes, spacing ratios, breakpoints, etc. The resulting CSS will only contain the classes that you actually use, resulting in a very streamlined final production file size.

Recommended Reading A Complete Guide to Website Construction: From Zero to Going Online, Implementing a Modern and Efficient Website Building Process。

How to start installing and configuring

To start using Tailwind CSS, you first need to integrate it into your project. The recommended way to do this is by installing it using Node.js and 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 →

Install the core packages using npm.

First, initialize the project using npm (if it hasn’t been initialized yet), and then install Tailwind CSS and its dependencies. Run the following commands in the root directory of your project:

npm install -D tailwindcss postcss autoprefixer

This command will install Tailwind CSS itself, PostCSS (a tool used for processing and transforming CSS), as well as Autoprefixer (which automatically adds browser-specific prefixes to CSS code).

Generate a configuration file.

Next, generate the default configuration files for Tailwind CSS and PostCSS:

npx tailwindcss init -p

This command will create two files:tailwind.config.js and postcss.config.jsAmong them, tailwind.config.js This is the main place where you customize and design the system.

Recommended Reading Website Construction Guide: A Comprehensive Process and Core Technologies for Building High-Performance Websites from Scratch。

Configure the template path.

In order for Tailwind to intelligently remove unused styles (also known as “Tree Shaking”), you need to… tailwind.config.js Specify all the source file paths that contain the Tailwind class names. Find them. content Fill in the fields and configure them accordingly:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // 根据你的项目结构调整路径
  theme: {
    extend: {},
  },
  plugins: [],
}

Introduce basic styles

Finally, in your main CSS file (for example… src/input.css Or styles/globals.cssIn this document, we use @tailwind The instructions include all the layers of Tailwind CSS:

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

Then, in your build process (for example, using Vite, Webpack, or directly through the CLI), process this CSS file to generate the final style sheet.

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

Core Concepts and Practical Classes

The key to understanding Tailwind CSS lies in mastering its practical class naming conventions and responsive design methods.

Practical Naming Rules

The naming convention for utility classes in Tailwind follows an intuitive pattern:{属性}{方向}-{尺寸}For example:
* mt-4：margin-top: 1rem; In Tailwind CSS, 1 unit is typically equal to 0.25rem; therefore, 4 units represent 1rem.
* px-6：padding-left: 1.5rem; and padding-right: 1.5rem;。
* bg-gray-100：background-color: #f3f4f6;。
* text-xl：font-size: 1.25rem; line-height: 1.75rem;。
* rounded-lg：border-radius: 0.5rem;。

This naming convention makes the styling intentions very clear when writing HTML, as there is no need to remember the names of custom CSS classes.

Recommended Reading A guide to the whole process of building a modern website: technical practices and strategy analysis from zero to online。

响应式设计与断点前缀

Tailwind uses a mobile-first breakpoint system. The default utility classes are suitable for all screen sizes (including mobile devices). To apply styles to larger screens, you need to add the corresponding breakpoint prefix before the class name.
The default breakpoints are:
* sm: (640px)
* md: (768px)
* lg: (1024px)
* xl: (1280px)
* 2xl: (1536px)

For example.<div class="text-center md:text-left"> This means that the text will be aligned to the left on screens with a size of medium or larger, and centered on screens of other sizes.

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

State Variants and Pseudoclasses

Tailwind provides a rich set of prefixes for handling different states of elements, such as hover, focus, and activation. These prefixes are combined with utility classes using a colon.
Common variant prefixes include:
* hover: (:hover)
* focus: (:focus)
* active: (:active)
* disabled: (:disabled)

For example.<button class="bg-blue-500 hover:bg-blue-700"> A button will be created with a default blue color that turns dark blue when hovered over it. You can configure this in the configuration file. theme.extend Some of these variants are customized.

Build a responsive card component

Now, let’s put the above knowledge into practice and build a modern, responsive card component. This card will include an image, a title, a description, and a button, and its layout will adjust gracefully to different screen sizes.

The basic HTML structure for creating a card:

We start with the most basic containers and content. Let’s create one. .html File, and create the following structure:

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white">
  <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Card image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Tailwind CSS Card Title</div>
    <p class="text-gray-700 text-base">
      This is a description of the card, which outlines its main features or content. Such designs can be quickly implemented using Tailwind CSS.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Learn more
    </button>
  </div>
</div>

At this point, you already have a basic card template: a white background, rounded corners, shadows, an image, and a button.

Add responsive layout adjustments.

We want the cards to stack vertically on mobile devices and to display side by side on medium-sized screens (such as tablets) and larger. We can achieve this using Flexbox and responsive breakpoints. We will wrap the card containers inside a Flex container.

<div class="container mx-auto p-4">
  <div class="flex flex-col md:flex-row gap-6"> <!-- 响应式 Flex 方向 -->
    <!-- 卡片 1 -->
    <div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Card image">
      <div class="p-6">
        <div class="font-bold text-xl mb-2">Card One Title</div>
        <p class="text-gray-700 text-base mb-4">
          Description for Card One.
        </p>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full md:w-auto">
          Operation One
        </button>
      </div>
    </div>
    <!-- 卡片 2 -->
    <div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/401/300" alt="Card image">
      <div class="p-6">
        <div class="font-bold text-xl mb-2">Card Two Title</div>
        <p class="text-gray-700 text-base mb-4">
          Description for Card Two:
        </p>
        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full md:w-auto">
          Operation Two
        </button>
      </div>
    </div>
  </div>
</div>

Key Points:
1. flex flex-col md:flex-rowThe outer container is arranged vertically by default.flex-colOn medium-sized screens, the elements change to a horizontal arrangement.md:flex-row）。
2. gap-6Add spacing between Flex child items.
3. flex-1Make two cards divide the space equally when arranged in a horizontal layout.
4. w-full md:w-autoThe button takes up the full width on mobile devices and returns to its automatic width on screens larger than medium size.

Custom hover and focus styles

To make the interaction more subtle, we can add a hover effect to the card container itself and optimize the focus style of the buttons.

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1 transition duration-300 ease-in-out hover:shadow-2xl hover:-translate-y-1">
  ...
  <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-500 focus:ring-opacity-50 transition duration-150 ease-in-out w-full md:w-auto">
    Learn more
  </button>
  ...
</div>

Here we have added:
* transition duration-300 ease-in-outAdd smooth transitions to all attribute changes of the card.
* hover:shadow-2xl hover:-translate-y-1When the mouse hovers over the element, the shadow expands in size and moves slightly upward, creating a “floating” effect.
* focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50Remove the default focus outline from the browser and replace it with a custom blue halo, which better fits the design.

summarize

Tailwind CSS has revolutionized the way front-end developers write styles through its functionally prioritized, practical class-based methodology. It eliminates the context loss associated with switching between different files and integrates design decisions directly into the HTML code, resulting in incredibly efficient development. The entire process—from installing and configuring Tailwind, understanding its intuitive naming conventions, to using responsive breakpoints and state variations to build complex components—exemplifies the concept of “freedom within constraints.”

Through the practice of building a responsive card component, we learned how to combine detailed, practical classes into a complete design and easily implement interactive effects as well as multi-device compatibility. Although class names may seem lengthy at first, once you become familiar with the pattern, the development speed will significantly improve. Tailwind CSS is not just a CSS framework; it’s also a powerful, customizable design system engine, suitable for a wide range of scenarios, from prototype design to large-scale production projects.

FAQ Frequently Asked Questions

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

No. This is precisely one of the core advantages of Tailwind CSS. During the production build process, Tailwind runs a “Purge” process (referred to as “Content” analysis in versions 3.0 and later). It scans all the template files you specify in your configuration file (such as HTML, JSX, Vue), identifies all the utility classes that have been used, and then only includes those classes in the final CSS file.

Unused styles will be completely removed, so the final generated CSS file typically weighs only a few kilobytes to a dozen kilobytes – which is much smaller than many manually written CSS files or those using traditional component libraries. You can achieve this by configuring the settings precisely. content The path is used to ensure that the analysis process is carried out correctly and without errors.

Will HTML become difficult to read if practical class names are so long?

这是一个常见的初次印象。确实，HTML 中的 class 属性会变得很长。然而，许多开发者认为这是一种权衡，并且带来了几个好处：首先，你无需为类名起名而苦恼（如 card-container-inner-wrapperThere's also no need to jump back and forth between CSS and HTML files to find style definitions; all the styles are clearly written right on the elements.

Secondly, regarding team collaboration, it provides a consistent design language that enables new members to quickly understand the intended style of the designs. To improve readability, you can use… @apply The instructions suggest extracting commonly used utility classes into the CSS file as custom component classes, or utilizing editor plugins (such as Tailwind CSS IntelliSense) to gain features like auto-completion and syntax highlighting, which significantly enhances the coding experience.

Which front-end frameworks is Tailwind CSS suitable for using with?

Tailwind CSS can be seamlessly integrated with almost all modern front-end frameworks and libraries. It essentially just generates CSS code and does not rely on any specific JavaScript runtime environments.

In frameworks such as React, Vue, Angular, and Svelte, you can use Tailwind CSS class names just like you would in regular HTML. The community also provides official or third-party plugins and tools tailored for these frameworks. @headlessui/react(Produced by Tailwind itself, offering interactive components without any predefined styles.) These components can be seamlessly integrated with the styles you create using Tailwind. Simply make sure that your build process (such as Vite or Webpack) is correctly configured to use PostCSS and Tailwind.

How to customize the theme colors and spacing?

All customizations are in tailwind.config.js The document's theme The process is carried out in parts. Tailwind uses two strategies: “extend” and “override”. If you want to add new values while retaining the default ones, you should use the “extend” approach. extend。

For example, to add a brand color and adjust the spacing ratio:

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

After the configuration, you can use it directly bg-brand and p-128 Here’s the class in question. If you want to completely replace the default palette or spacing settings, you can simply place the new definitions in their respective locations. theme “Down, rather than…” extend The configuration system of Tailwind is extremely flexible, allowing you to create a design system that is completely tailored to your own needs.