In modern front-end development, achieving efficient, consistent, and maintainable styles is the goal of every developer. Traditional methods of writing CSS often result in bloated style sheets, difficulties in naming elements, and high costs associated with switching between different contexts (e.g., between different styles or design frameworks).Tailwind CSSAs a CSS framework that prioritizes functionality, it has completely transformed the way we build user interfaces by providing a range of low-level, composable, and practical classes. It enables developers to apply styles directly to HTML elements using class names, facilitating rapid prototyping and highly customized UI development, while keeping the CSS files compact in size.
This tutorial will guide you from scratch to mastering...Tailwind CSSThe core concepts and practices enable one to independently create a modern, responsive user interface.
What is Tailwind CSS and its core philosophy?
Tailwind CSSIt is not a pre-packaged component library (such as Bootstrap), but rather a CSS framework. Its core philosophy is “Utility-First,” which means that it does not provide features or components in a predefined, ready-to-use form. In other words, users need to write their own CSS code to implement the desired functionality.btnOrcardInstead of providing semantic component classes, these libraries offer a large number of low-level, single-purpose utility classes that are designed to perform specific tasks, such as managing margins.m-4… controls the color of the text.text-blue-500And for controlling elasticity…flex。
Recommended Reading Unlock the powerful features of Tailwind CSS: from a basic introduction to a practical application guide。
The advantage of this approach is that it provides developers with great flexibility and control. You don’t have to write a large amount of highly specific CSS to override the styles of predefined components, nor do you need to worry about the semantics of class names. All styles are declared through combinations of class names in HTML, which closely integrates the UI’s appearance with its structure, making it easy to understand and modify. Additionally, by using…PurgeCSS(In the production version), the framework can automatically remove all unused CSS, resulting in a very small size for the final generated file.
Environment setup and project initialization
To get started using it…Tailwind CSSFirst of all, you need to integrate it into your project. The most common way to do this is by installing it using Node.js and npm (or yarn).
Install Tailwind using npm:
First, initialize npm in your project's root directory using the command line and then install the necessary packages.Tailwind CSSAnd its dependencies. Create a new project folder and execute the following commands:
npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initThe above command will perform the installation.tailwindcss、postcss(Used for processing CSS) andautoprefixer(Automatic addition of browser prefixes), and generation of a default configuration file.tailwind.config.js。
Create and configure a PostCSS file.
Next, you need to create a file in the project's root directory.postcss.config.jsFile, and then…tailwindcssandautoprefixerAdd as a plugin.
Recommended Reading An in-depth analysis of the Tailwind CSS framework: Building modern responsive interfaces from scratch。
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}Introducing the basic styles from Tailwind
Then, in your main CSS file (for example…src/styles.cssOrsrc/input.cssIn this document, we use@tailwindInstructions for including all layers of the framework.
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;Finally, you can process this CSS file using build tools such as Vite or Webpack, or you can simply use it directly.npx tailwindcss -i ./src/input.css -o ./dist/output.css --watchUse a command to compile CSS in real time. In your HTML file, link to the compiled CSS file that is generated.output.cssThe file can be used immediately.
\nCore Practical Classes and Responsive Design
Tailwind CSSThe utility classes cover all aspects of CSS, and their naming conventions are intuitive and consistent.
Layout and Spacing
Layout classes such asflex、grid、blockUsed to define the display mode. The spacing is determined by…m-{size}(Margins)p-{size}(The padding is controlled using numbers.) The dimensions are usually expressed in numbers, such as…m-4Corresponding to1remIt also supports automatic processing.auto) and percentages.
Color and background
You can usetext-{color}-{shade}Set the text color, for example:text-gray-800The background color is used as follows:bg-{color}-{shade}For example,bg-blue-100The framework offers a rich range of color gradients, ranging from 50 to 900.
Responsive breakpoints
Responsive design isTailwind CSSIts strengths lie in this area. By default, it provides 5 breakpoint prefixes:sm: (640px)md: (768px)lg: (1024px)xl: (1280px)2xl: (1536px). You can add these prefixes before any utility class to define the style for different screen sizes.
Recommended Reading From Beginner to Expert: A Comprehensive Guide to Building Modern Responsive Websites with Tailwind CSS。
For example.<div class="text-center md:text-left p-4 md:p-8">This design ensures that text on mobile devices is centered with smaller margins, while on screens of medium size and larger, the text is aligned to the left with larger margins. This mobile-first approach makes it extremely easy to create responsive interfaces.
Build a responsive navigation bar instance.
Let’s put all the above concepts into practice with a complete example of a responsive navigation bar. This navigation bar folds into a hamburger menu on mobile devices and expands horizontally on larger screens.
First, write the HTML structure and apply it.Tailwind CSSPractical classes.
<nav class="bg-gray-800 shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- 网站Logo -->
<div class="flex-shrink-0">
<a href="#" class="text-white font-bold text-xl">My website</a>
</div>
<!-- 桌面端导航链接 (默认隐藏，在中等屏幕显示) -->
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Regarding</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Service</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
<!-- 移动端菜单按钮 -->
<div class="md:hidden">
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
<!-- 汉堡菜单图标 (简化SVG) -->
<svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</div>
<!-- 移动端下拉菜单 (默认隐藏) -->
<div class="md:hidden hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Regarding</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Service</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
</div>
</div>
</nav>
<script>
// 简单的JavaScript用于切换移动菜单
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
</script>In this example, we used:
Background and shadows:bg-gray-800 shadow-lg
Maximum width and horizontal centering:max-w-7xl mx-auto
Responsive padding:px-4 sm:px-6 lg:px-8
Flexible layout:flex, justify-between, items-center
Responsive display/hide:hidden md:block and md:hidden
Hover effect:hover:bg-gray-700 hover:text-white
By combining these classes, we were able to quickly create a fully functional, modern-looking, and responsive navigation bar without having to write a single line of custom CSS.
summarize
Tailwind CSSBy adhering to the principle of prioritizing functionality, the flexibility and efficiency of style construction have been elevated to a new level. It may seem at first like a lot of class names are being written in HTML, but once you get used to it, the speed and consistency of development will yield significant benefits. This includes everything from setting up the development environment, using core utility classes, applying responsive breakpoints, to building complete components.Tailwind CSSA complete and predictable set of tools has been provided for developers.
Through the practice in this tutorial, you should have already mastered how to use…Tailwind CSSLaunch the project and get a basic understanding of how to build a responsive UI. Next, you can further explore its more advanced features, such as custom configurations, a plugin system, support for dark mode, and more.@applyThe command extraction component allows for more efficient integration into your workflow.
FAQ Frequently Asked Questions
Will using Tailwind CSS make the HTML code look messy or difficult to understand?
Indeed, beginners may find that HTML contains many class names, which can seem cumbersome. However, this actually centralizes the styling logic in the view layer, avoiding the need to frequently switch between HTML and CSS files. As you become more familiar with the various tools and techniques, your reading efficiency will improve significantly. For repeated styling patterns, you can use…@applyThe instructions are extracted from the CSS and turned into component classes, in order to keep the HTML code concise.
How to customize the default theme of Tailwind CSS (such as colors and spacing)?
Customization is mainly achieved by modifying the files under the project root directory.tailwind.config.jsFile implementation: You can find the relevant details in this configuration file.themeYou can extend or override the default values within an object. For example, to add a custom color, you can do so by…theme.extend.colorsThe framework is defined as follows: Its configuration is highly flexible, allowing you to deeply customize the design system to meet your specific needs.
Will the production files generated by Tailwind CSS be very large in size?
No. That’s exactly the point.Tailwind CSSOne of its major advantages is that, during the production build process, it will work in conjunction with…PurgeCSS(The compiler, or its own JIT engine, works together to intelligently analyze your project files – HTML, JSX, Vue templates, etc. – and only includes the CSS classes that are actually used in the final production file. As a result, a very small CSS file is generated.)
Can it be used together with front-end frameworks such as React and Vue?
That's absolutely fine.Tailwind CSSIt is a CSS framework that is decoupled from any view layer framework that supports CSS. You can install and configure it using the same steps in projects built with React, Vue, Angular, or Svelte. Using its class names directly within single-file components in React/Vue is an extremely common and efficient way of developing.
What's next, what's next?
Extended reading and practical knowledge
The following are related to the topic of this article and are suitable for further in-depth reading. Prioritize starting with the article that is closest to your current problem, and gradually expanding to surrounding topics usually works better.
- Web site construction: A complete technical guide to building a professional website from scratch to completion
- To build a WordPress website that is both beautiful and functional, you need to choose a theme that meets your design and functionality requirements. A good theme should:
- A Comprehensive Guide to the Entire Website Construction Process: A Step-by-Step Analysis from Zero Foundation to Professional Launch
- Mastering the Core of Tailwind CSS: A Modern Front-End Development Guide from Practical Classes to Responsive Design
- Master the entire website construction process: A technical guide and best practices from scratch to going live
English