Learning Tailwind CSS: Building a modern responsive website from scratch

As the demand for efficiency and consistency in front-end development continues to grow, CSS frameworks that prioritize practicality have gradually become the mainstream. Among them,Tailwind CSS It stands out for its unique design philosophy. It is not a library of pre-defined UI components; rather, it is a set of tools that provides a large number of atomic CSS classes. Developers can quickly create custom designs by simply combining these classes directly within their HTML code. This approach has completely transformed the way we write styles, shifting from writing semantic CSS rules to applying functional class names within the markup language itself.

What is Tailwind CSS?

Tailwind CSS It is a highly customizable, low-level CSS framework that offers a range of finely-grained, single-purpose utility classes. .text-center、.p-4、.bg-blue-500 Developers can combine these classes to create any desired design without having to leave the HTML file and write a large amount of custom CSS.

\nCore design philosophy

Tailwind CSS The core philosophy of this approach is “practicality first.” It encourages you to think of styles as reusable, modular tools, rather than writing semantic class names for each individual component. This means you no longer have to worry about how to name a class that represents “card title”; you can simply apply the relevant style directly. .text-xl font-bold mb-2 These classes that describe the specific styles are sufficient. This approach significantly improves the development speed and ensures the consistency of the design system.

Recommended Reading The Ultimate Guide to Tailwind CSS: A Practical Tutorial from Beginner to Expert。

Comparison with traditional CSS frameworks

Unlike frameworks like Bootstrap or Ant Design, which provide ready-made components such as buttons and navigation bars,Tailwind CSS It does not provide any components with predefined appearances; it only offers the “raw materials” needed to build components. This offers unparalleled flexibility, allowing you to implement the UI exactly as per the design specifications, without having to go through the hassle of overriding the framework’s default styles. Although the initial learning curve may be a bit steep, the efficiency of development is significantly improved once you master it.

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 →

How to start using Tailwind CSS

start using Tailwind CSS There are several ways to do this, and the most recommended methods are using its official CLI tool or integrating it with front-end build tools.

Install via NPM.

The most common way to install it is through npm or yarn. First, initialize an npm project in the root directory of your project (if it hasn’t been initialized yet), and then proceed with the installation. Tailwind CSS And its dependencies.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This command will generate a default configuration file. tailwind.config.jsNext, you need to include the relevant code in the project's CSS entry file. Tailwind CSS The instructions.

Configure the core CSS files

Create a CSS file, for example… src/input.cssAnd add the following content:

Recommended Reading Master Tailwind CSS Completely: A Guide to the Modern CSS Framework, from Beginner to Practical Application。

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

Then, in tailwind.config.js Configure the path to your template file in the file to ensure that… Tailwind CSS It is capable of scanning your HTML, JavaScript, and other files, and removing any unused styles.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Finally, run the build command to process your CSS files. If you’re using a tool like Vite and have configured the PostCSS plugin, this process is usually automated.

\nCore Practical Classes and Responsive Design

Tailwind CSS The power of this tool lies in its extensive and well-organized collection of practical utilities, which cover almost all CSS properties related to layout, spacing, formatting, colors, borders, and effects.

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

Examples of commonly used utility classes

For example, to create a card with a shadow, rounded corners, padding, and a blue background, you simply need to combine the following classes on the HTML element:

<div class="bg-blue-100 rounded-lg shadow-md p-6">
  <h3 class="text-xl font-bold text-gray-800">Card title</h3>
  <p class="text-gray-600 mt-2">This is a card that was quickly created using practical Tailwind CSS classes.</p>
</div>

Here,.bg-blue-100 Setting the background color,.rounded-lg Set large rounded corners,.shadow-md Add a medium shadow..p-6 Set a padding of 1.5rem..text-xl Classes such as these are used to control the text style.

Implement a responsive layout

Tailwind CSS The responsive design system is truly elegant. It adopts a mobile-first approach, using prefix-based breakpoints to define default styles specifically for mobile devices, and these default styles are then overridden on larger screens by applying the corresponding prefixes. The available breakpoint prefixes include… sm:、md:、lg:、xl:、2xl:。

Recommended Reading Introduction to and Practical Application of Tailwind CSS: Building Modern Responsive Web Interfaces from Scratch。

For example, to create a layout with two columns that stack on mobile devices and appear side by side on medium-sized screens:

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

In the above code,.flex-col To arrange child elements vertically… md:flex-row This indicates that the child elements should be arranged horizontally on screens with a size of medium or larger.md:w-1/2 Make sure that each sub-element occupies half of the width on a medium-sized screen.

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

Custom and extended themes

even though Tailwind CSS A variety of default designs are available, but to maintain consistency with the brand, customization is essential. This is mainly achieved by making modifications. tailwind.config.js In the document, theme It can be partially achieved.

Expand the theme configuration

You can do it on theme.extend Add new values to the object, rather than overwriting the entire default theme. This way, you can retain the default values while still incorporating your custom modifications.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      },
      fontFamily: {
        'sans': ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

After the configuration is complete, you can start using it. .text-brand-blue、.mt-128 and .font-sans These are the custom classes.

Use any value.

For one-time style adjustments,Tailwind CSS It is possible to use bracket syntax to specify any value. This is very useful when you need to precisely control a certain attribute without having to modify the theme configuration.

<div class="top-[117px] w-[calc(100%-16px)] bg-[#1da1f2]">
  <!-- 内容 -->
</div>

This approach provides great flexibility, but it should be used with caution in order to maintain consistency in the style and ensure the code is easy to maintain.

summarize

Tailwind CSS Through its “practicality-first” approach to atomic classes, it provides front-end developers with an efficient, consistent, and highly flexible way to develop styles. It has changed the way we write CSS by shifting design decisions from the style sheet to the markup language itself, thereby accelerating the UI construction process and making it easy to implement completely customized designs. Although it requires memorizing some class names at first, the significant improvements in development efficiency and the convenience it offers for team collaboration make it a highly valuable tool in modern web development.

FAQ Frequently Asked Questions

Will Tailwind CSS make the HTML code become bloated?

Yes, this is how it is used. Tailwind CSS One of the most common criticisms is that HTML often contains a large number of class names, which can sometimes reduce readability.

However,Tailwind CSS During the production build process, PurgeCSS (which is now built into the content scanning mechanism) is used to remove all unused styles. As a result, the final CSS file is usually much smaller in size compared to CSS files generated manually or using traditional UI frameworks, which offers significant performance advantages. Regarding the readability of HTML, this can be improved through componentization (such as using Vue or React components) or by adopting other best practices. @apply The instruction recommends extracting duplicate class combinations in order to alleviate the issue.

In team projects, how can we ensure the consistency of styles?

Tailwind CSS Consistency is enforced through a restricted design system, which includes rules regarding spacing ratios, color palettes, and breakpoints. Developers can only use the values defined in the configuration files, which naturally prevents the use of arbitrary values.

To further standardize the process, the team should work together to maintain and adhere to these guidelines. tailwind.config.js For the theme configuration in question, it is recommended to extract complex or frequently recurring style combinations and turn them into components for reuse. @apply It is defined as a new utility class to ensure reusability and consistency.

Can it be used together with existing CSS or UI frameworks?

Sure, but it's not recommended to use them together directly. You can use them in specific parts of the project or on certain components. Tailwind CSSThe other parts use traditional CSS.

A better approach is to migrate gradually. You can configure it accordingly. Tailwind CSS The prefix Options (for example, setting them to) tw-This is to avoid class name conflicts. However, in the long run, having both paradigms coexist will increase maintenance complexity. The ultimate goal is to unify them under a single methodology.

Is Tailwind CSS suitable for all types of projects?

Tailwind CSS It is highly suitable for web applications and websites that require highly customized designs and rapid iteration, such as SaaS products, marketing pages, dashboards, and more.

For websites that focus on content and have relatively simple and fixed styles (such as blogs), or for scenarios where there are extreme requirements for browser performance and a need for minimalistic CSS, writing CSS by hand or using lighter-weight solutions may be more appropriate. However, for the majority of modern web projects…Tailwind CSS The advantages are very obvious.