guides/web/frameworks/tailwind

Tailwind CSS 是一款功能类优先的 CSS 框架，它允许开发者使用简单的类来构建复杂的网页布局。Tailwind 的设计哲学是减少前端的重复工作，让你专注于设计，而不是构建 CSS。

快速入门

1. 安装 Tailwind CSS
   首先，你需要在你的项目中安装 Tailwind CSS。你可以使用 npm 或 yarn：

   npm install tailwindcss postcss autoprefixer
   

   或者

   yarn add tailwindcss postcss autoprefixer
   

2. 配置 Tailwind CSS
   安装完成后，你需要在 tailwind.config.js 文件中配置你的 Tailwind CSS。

   module.exports = {
     content: ["./path/to/your/files/**/*.{html,js}"],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

3. 引入 Tailwind CSS
   在你的 HTML 文件中，你需要引入 Tailwind CSS：

   <link href="/path/to/tailwind.css" rel="stylesheet">
   

布局示例

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div class="bg-gray-100 p-6">Col 1</div>
    <div class="bg-gray-200 p-6">Col 2</div>
    <div class="bg-gray-300 p-6">Col 3</div>
  </div>
</div>

图片展示

深入了解

如果你想要更深入地了解 Tailwind CSS，可以访问官方文档。

更多 Tailwind CSS 相关教程。