Tailwind CSS快速入门

为什么要使用Tailwind CSS

只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站

Tailwind CSS 是一个功能类优先的 CSS 框架，它通过提供大量的原子类（utility classes）来帮助开发者快速构建界面。使用 Tailwind CSS 可以极大地提高开发效率，因为它减少了编写传统 CSS 时的重复性和模版代码。

Tailwind CSS 、传统的 CSS 、 CSS-in-JS 区别

CSS 管理方法	设计理念	使用方式	应用场景
Tailwind CSS	预定义实用类、直接应用HTML、快速构建	html直接添加class 类名	ui设计高一致通过预设样式减少重复，例如：管理系统
CSS-in-JS	css与js混合开发，动态变化、组件化	直接创建一个函数写在js中，动态变化	大量动态样式应用
传统的 CSS	样式细节、层叠能力	编写选择器指定元素应用对应样式	高度自定义样式和复杂布局项目，例如：活动页

使用Tailwind CSS的好处

1. 提高开发效率：Tailwind CSS 通过提供大量预设的实用类，让开发者能够快速构建界面，而不需要从头编写大量的 CSS。这可以显著提高开发速度和效率。
2. 响应式设计：Tailwind CSS 内置了响应式设计功能，使得在不同的屏幕尺寸和设备上创建响应式布局变得简单。开发者可以使用如 md:、lg: 等前缀，轻松地为不同设备设置不同的样式。
3. 定制化：Tailwind CSS 允许开发者通过配置文件进行深度定制，包括颜色、字体、间距等，使得整个网站的风格和设计可以保持一致性。
4. 实用性强：Tailwind CSS 的设计哲学是“实用类优先”，这意味着开发者可以直接使用类名来实现样式，而不需要编写单独的样式表。这样可以减少代码的复杂性，并使得代码更加直观和易于维护。
5. 易于维护：由于 Tailwind CSS 使用实用类的方式，所以在维护和更新样式时，通常只需要修改 HTML 文件中的类名，而不必深入到 CSS 文件中，这大大简化了维护工作。
6. 与现代前端框架兼容：Tailwind CSS 可以很好地与 React、Vue、Angular 等现代前端框架和库协同工作，帮助开发者构建现代化的网页应用。
7. 设计系统的一致性：对于需要遵循特定设计系统的项目，Tailwind CSS 提供了一种快速实现这些设计规范的途径，保证了设计的一致性。
8. 不需要浪费精力发明类名，也不用担心修改全局样式

安装

• Tailwind CSS 安装

Tailwindcss试用安装

1. 安装 Tailwind CSS

   npm install -D tailwindcss
   npx tailwindcss init

2. 配置模板文件的路径

   • tailwind.config.js

      /** @type {import('tailwindcss').Config} */
      module.exports = {
        // 配置模板文件的路径
        content: ["./src/**/*.{html,js}"],
        theme: {
          extend: {},
        },
        plugins: [],
      };
      ______________________________________________________
      /** @type {import('tailwindcss').Config} */
      export default {
        content: ['./src/**/*.{html,js}'],
        theme: {
          extend: {}
        },
        plugins: []
      }
     

3. 下载Vscode的tailwindcss提示插件
   Tailwind CSS IntelliSense
   

4. 类名快速补全
   在 Visual Studio Code 中，设置 “tailwindCSS.emmetCompletions”: true 将启用 Tailwind CSS 的 Emmet 插件集成。
   Emmet 是一个用于快速编写 HTML 和 CSS 的工具，它通过缩写语法来扩展成完整的代码。
   

   1. 你可以通过点击左下角的齿轮图标选择“设置”，在设置搜索框中输入tailwindCSS.emmetCompletions找到 Editor: Emmet Completions 的设置，并确保它旁边的复选框被勾选。
   2. 如果你想要通过 JSON 文件编辑设置，可以打开 settings.json 文件（可以通过点击设置界面右上角的图标）
      并添加以下配置：

      {
        "tailwindCSS.emmetCompletions": true,
      }
      

• 效果
  

快速书写技巧

以下是一些使用 Tailwind CSS 快速书写的技巧：

1. 熟悉类名： Tailwind CSS 的类名是直观的，例如 .text-center 使文本居中，.bg-blue-500 设置背景色为蓝色。熟悉这些类名能帮助你快速构建界面。
2. 使用 @apply 指令： 如果你在使用预处理器（如 SASS 或 LESS）或者喜欢在 CSS 文件中定义样式，可以使用 @apply 指令将 Tailwind 的类名应用到你的样式规则中。

   .btn {
     @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
   }
   

3. 利用响应式设计： Tailwind CSS 提供了响应式前缀，如 md: 表示在中等屏幕大小及以上时应用该样式。

   <div class="md:bg-blue-500">
     <!-- 内容 -->
   </div>
   

4. 使用配置文件定制： Tailwind CSS 允许你通过 tailwind.config.js 文件进行大量定制，包括颜色、字体、间距等。合理配置可以减少不必要的类名，使项目更加整洁。
5. 使用 VS Code 插件： 安装 Tailwind CSS 的 VS Code 插件可以提供智能提示和自动补全，进一步加快开发速度。
6. 构建自己的设计系统： 如果你的项目有特定的设计要求，可以基于 Tailwind CSS 构建自己的设计系统，定义一套符合项目风格的类名。
7. 利用函数和简写： Tailwind CSS 提供了一些简写方式，比如 p-4 可以同时设置上下左右的外边距。
8. 学习官方文档和社区资源： Tailwind CSS 的官方文档非常完善，社区也有很多资源和教程可以帮助你快速上手和提高。

通过这些方法，你可以更高效地使用 Tailwind CSS，快速构建出既美观又响应式的网页。

扩展原子class

• 通过 @layer、@apply 或者插件的方式扩展原子 class
  • html

    <!-- Will look like a card, but with square corners -->
    <div class="card rounded-none">
      <!-- ... -->
    </div>
    

  • main.css

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    @layer components {
      .card {
        background-color: theme('colors.white');
        border-radius: theme('borderRadius.lg');
        padding: theme('spacing.6');
        box-shadow: theme('boxShadow.xl');
      }
      /* ... */
    }
    

• 支持 prefix 来避免 class 名字冲突
  • tailwind.config.js

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      // ...
      prefix: 'tw-',
    }
    

速查手册

• Tailwindcss速查手册