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

What is Tailwind CSS?

In the world of web development, CSS frameworks are constantly emerging, andTailwind CSSIt stands out with its unique “utility-first” concept. It's not a UI kit that provides predefined components, but a toolset that offers fine-grained, low-level CSS classes. Developers can combine these atomic CSS classes (such as <) to create their own custom interfaces.text-center、mt-4、bg-blue-500) Build fully customized designs directly in HTML. This model completely changes the way developers write styles, moving style decisions from CSS files back to markup languages or templates, achieving a close coupling of styles and structures, thus bringing unprecedented development speed and flexibility.

Compared with traditional CSS or frameworks like Bootstrap,Tailwind CSSThe core advantage of this approach lies in avoiding the hassle of naming and the endless expansion of style sheets. You no longer need to rack your brains to come up with a class name for each component, nor do you need to manage a bulky CSS file that gradually becomes disconnected from the HTML structure. All styles are expressed through a set of well-designed, highly consistent utility classes, which makes building responsive, interactive interfaces intuitive and efficient.

How to install and configure it?

To get started using it…Tailwind CSSYou can integrate it into your project in various ways. The most common method is to install it via a Node.js package manager (such as npm or yarn).

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

First, initialize npm in the root directory of your project (if you haven't done it yet), and then install it.Tailwind CSSAnd its dependencies.

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
npx tailwindcss init

fulfillmentnpx tailwindcss initThe command will generate a file namedtailwind.config.jsThe configuration file. This file is customizedTailwind CSSIt's the core of the project. Here, you can define the theme color, font, breakpoints, plugins, and other settings of the project. A minimal configuration might look like this, which specifies the following:Tailwind CSSWhich files need to be scanned for style purge (Purge)?

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

Next, you need to import the various layers of Tailwind into the core CSS file of the project. Usually, this file is namedsrc/styles.cssOrinput.css。

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

Finally, you need a build process to process the above-mentioned instruction layer and compile it into the final CSS. You can usePostCSSCooperationtailwindcssYou can either install the plugin or use it directlyTailwind CLITools. Example of the build command using the CLI:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

This command will monitor./src/input.cssThe changes to the file and the real-time compilation output to./dist/output.cssYou just need to link to the final output in HTML.output.cssJust the file is needed.

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

\nCore Practical Classes and Responsive Design

Tailwind CSSThe power of Bootstrap lies in its extensive and systematic utility classes. These classes cover almost all common CSS properties and follow a consistent naming convention.

Layout and Spacing

Controlling layout and spacing is one of the most frequent operations in daily development.Tailwind CSSA wide range of classes are provided to achieve this. For example,flex、gridUsed for creating layouts;m-4(margin),p-6(Padding) is used to control the inner and outer margins. The number usually corresponds to a rem unit (a multiple of 0.25rem by default),m-autoThen it represents automatic margins.

<div class="flex justify-between items-center p-6">
  <div class="m-2">Project One</div>
  <div class="m-2">Project Two</div>
</div>

Color and background

The color system is part of the theme. You can use, for example,text-gray-800Setting the text color,bg-blue-500Setting the background color,border-red-300Set the border color. The numbers (50 to 900) represent the color's gradient of depth, providing an extremely high level of design consistency.

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

Responsive breakpoints

Implementing responsive design isTailwind CSSIt's a strong point. By default, it provides five breakpoint prefixes:sm:、md:、lg:、xl:、2xl:You can add these prefixes before any utility class to specify that the style will take effect when the screen width is equal to or greater than a certain value.

<div class="text-center md:text-left lg:flex">
  <p class="w-full lg:w-1/2">On the phone, it's centered; on a medium-sized screen, it's aligned to the left; and on a large screen, it's in a flex container and its width is set to half the screen width.</p>
</div>

This “mobile-first” approach means that styles without prefixes apply to all screens, while styles with prefixes override those for larger screens, making it exceptionally clear and simple to build complex responsive layouts.

Practical Example: Building a Card Component

Let's integrate what we've learned by building a modern responsive card component. This card will include a profile picture, a title, a description, and an action button.

Recommended Reading Introduction to Tailwind CSS and Practical Application: A Practical Guide to Building Modern Responsive Websites。

First, we set up the basic container for the card, using rounded corners, shadows, and padding to define the visual hierarchy of the card.

<div class="max-w-sm rounded-2xl overflow-hidden shadow-lg bg-white p-6">
  <!-- 卡片内容将放在这里 -->
</div>

Next, inside the container, we create a flex layout to arrange the profile pictures and user information.

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

<div class="flex items-center space-x-4 mb-4">
  <img class="w-12 h-12 rounded-full object-cover" src="/avatar.jpg" alt="User Avatar">
  <div>
    <h3 class="text-xl font-bold text-gray-900">Zhang San</h3>
    <p class="text-gray-500">Front-end development engineer</p>
  </div>
</div>

Then, add the main description of the card.

<p class="text-gray-700 mb-6">
  This is a tool that uses<code data-no-auto-translation="">Tailwind CSS</code>An example card component that has been built. It demonstrates how to quickly implement a visually appealing and fully responsive UI element by combining utility classes.
</p>

Finally, we add a button. By using the responsive prefix, the button will take up the entire width on small screens and adapt its width to the content on large screens.

<button class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-1">
  了解更多
</button>

By combining all the above code, you will get a complete card component. By adjusting it, you can customize the appearance and functionality of the card component to meet your specific needs.max-w-smThe value of the inner margin or the breakpoint prefix, and you can easily adjust its appearance on different devices. This practice clearly demonstrates thatTailwind CSS“An efficient workflow designed into the markup.

summarize

Tailwind CSSIt's not just a CSS framework; it represents an efficient and maintainable paradigm for modern web styling. Through its atomic utility classes, developers can build unique user interfaces at an astonishing speed while maintaining high code consistency and controllability. Its built-in responsive design system and highly configurable themes make adapting to multiple devices and brand customization effortless. Although you may need to memorize some class names initially, once you've mastered it, the improvement in development efficiency and reduction in mental burden are unmatched by traditional CSS methods. For teams and individual developers who prioritize development speed, design flexibility, and end-product performance, it's an indispensable tool.Tailwind CSSIt's undoubtedly a powerful tool.

FAQ Frequently Asked Questions

Will Tailwind CSS make the HTML code become bloated?

Indeed, writing a large number of class names directly in HTML will make the tags look longer and more complex. This is becauseTailwind CSSThe most frequently mentioned disadvantages.

However, this “redundancy” has its positive significance in practice. It tightly binds style and structure, allowing users to easily understand the style of an element when reading HTML without having to switch back and forth between HTML and CSS files. For projects using component-based frameworks (such as React and Vue), these class names are encapsulated within components, which actually enhances maintainability. In addition, with the purge function of build tools, the final production package CSS files will be very small, containing only the styles that are actually used, which often outperforms hand-written or traditional framework CSS in terms of performance.

How to customize the theme colors or spacing?

Custom themes are mainly created by modifying the files located in the project root directory.tailwind.config.jsIt can be done by editing the configuration file.

In the configuration file…theme.extendFor some parts, you can add or overwrite the default theme values. For example, to add a brand color, you can configure it as follows:

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

After the configuration is completed, you can use it in your projectbg-brand-blueOrw-128This is such a custom class. This approach ensures that your design system remains consistent throughout the entire project.

Which front-end frameworks is it suitable for use with?

Tailwind CSSIt integrates seamlessly with almost all modern front-end frameworks and libraries, which is one of the main reasons for its popularity.

In component-based frameworks such as React, Vue, Angular, or Svelte, you can use Tailwind classes in component templates just like you would in ordinary HTML. Many framework's scaffolding tools (such as Next.js and Vite) provide out-of-the-box support for Tailwind.Tailwind CSSIntegration options. In addition, things like...@tailwindcss/forms、@tailwindcss/typographySuch official plugins can better solve problems in specific scenarios, such as form styles and rich text content styles, and further enhance the development experience of collaborating with various frameworks.

Will the final CSS file in the production environment be very large?

No. That’s exactly what it is.Tailwind CSSA key advantage in design. Although the development version includes all possible classes and has a large file size, this is just for development convenience.

During the production build phase,Tailwind CSSIt will analyze your template files (in versions 3.0 and above, this process is called “content scanning”) through its “Purge” mechanism.tailwind.config.jsThecontentAs specified in the field, only the CSS classes that are actually used are packaged into the final CSS file. This means that the final generated CSS file is usually only a few KB to over 10 KB in size, which is much smaller than many handwritten CSS files or unoptimized UI framework CSS files, thereby ensuring excellent loading performance.