# Tailwind 01 安装及配置

该小结并无使用总结，主要介绍 Tailwind 的安装配置。

# 安装

1. 通过 npm 安装 Tailwind：

   $: npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
   

2. 初始化 Tailwind CSS

   初始化生成tailwind.config.js和postcss.config.js文件

   $: npx tailwindcss init -p
   

   生成最小化的tailwind.config.js和配置好tailwindcss和​autoprefixer的postcss.config.js。

   // tailwind.config.js
   /** @type {import('tailwindcss').Config} */
   export default {
     content: ['],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

3. 对tailwind.config.js文件进行配置，如content属性是配置哪些文件需要用 Tailwind。

   // tailwind.config.js
   /** @type {import('tailwindcss').Config} */
   export default {
     content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

4. 两种引入项目的方式:

   • 通用配置: 在 CSS 中引入 Tailwind。创建 ​./src/index.css​ 文件 并使用 ​@tailwind​ 指令来包含 Tailwind 的 ​base​、 ​components ​ 和 ​utilities ​ 样式，来替换掉原来的文件内容。

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

   Tailwind 会在构建的时候，将这些指令全部转换成基于自定义配置的样式文件。

   需要注意的是，应当确保 css 文件有被引用使用，否则可能会报错。

   • 若是在如 vue+vite 等框架内使用，应为改为 vite.config.ts 中增加配置。

   // vite.config.ts
   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import tailwindcss from 'tailwindcss'
   import autoprefixer from 'autoprefixer'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [vue()],
     css: {
       postcss: {
         plugins: [tailwindcss, autoprefixer],
       },
     },
   })
   

   并在 main.ts 中引入样式“'tailwindcss/tailwind.css'”:

   import { createApp } from 'vue'
   import App from './App.vue'
   import 'tailwindcss/tailwind.css'
   
   createApp(App).mount('#app')
   

# 编辑器配置

为了更好的开发体验，还需为编辑器安装相应的插件。

VScode 中是 Tailwind CSS IntelliSenseopen in new window。

# 响应式设计

Tailwind 对响应式做了较好的兼容，如下是常用断点：

要添加一个仅在特定断点生效的功能类，只需要在该功能类前加上断点名称，后面跟 : 字符。

<!--宽度默认 16, 中等屏幕宽度为 32, a 大屏宽度为 48 -->
<img class="w-16 md:w-32 lg:w-48" src="..." />

# 悬停、焦点和其他状态

对于处于 hover、focus 等状态的元素，也有同样的状态变体前缀。但并非所有的功能都默认开启（以减小包的体积大小）。

Hover 的状态变体前缀为 hover:：

<button class="bg-red-500 hover:bg-red-700">Hover 变体</button>

默认情况下， 以下核心插件启用了该 ​hover ​ 变体：

• backgroundColor
• backgroundOpacity​​
• borderColor​
• borderOpacity​
• ​boxShadow​
• ​gradientColorStops​
• ​opacity​
• ​rotate​
• ​scale​
• ​skew
• textColor​
• ​textDecoration​
• ​textOpacity​
• ​translate​

特殊的控件需要额外在 tailwind.config.js 文件中的 variants 中手动启用 hover 变体：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      padding: ['hover'],
    },
  },
}

其它前缀也是类似操作:

• Focus 的前缀为 focus:
• Active 的前缀为 active:
• Visited 的前缀为 visited:
• Disabled 的前缀为 disabled:
• ...

若是悬停父元素时，子元素需要做出响应，则应当给父元素添加 group 类，同时为族元素的功能添加 group-hover: 前缀。

<div
  class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent"
>
  <p class="text-indigo-600 group-hover:text-gray-900">New Project</p>
  <p class="text-indigo-500 group-hover:text-gray-500">
    Create a new project from a variety of starting templates.
  </p>
</div>

同样的，focus 同 hover 一样，给父元素添加 group 类，并为族元素的功能添加 group-focus: 前缀。

其它规则：

• 选择第一个元素：使用 first 类：<div class="first:bg-blue-500">第一个元素</div>
• 选择最后一个元素：使用 last 类：<div class="last:bg-red-500">最后一个元素</div>
• 选用奇数元素的前缀为 odd: ：<div class="odd:bg-green-500">奇数元素</div>
• 选用偶数元素的前缀为 even: ：<div class="even:bg-green-500">偶数元素</div>
• 选择第 n 个元素：使用 nth-child(n) 类，其中 n 是你想选择的元素的序号。例如，选择第三个元素：<div class="nth-child(3):bg-purple-500">选择第三个元素</div>

# 为自定义功能类生成变体

通过 @variants 指令包裹住自己的定义 CSS 类来生成状态变体：

/* Input: */
@variants group-hover, hover, focus {
  .customName {
    color: yellow;
  }
}

/* Output: */
.customName {
  color: yellow;
}
.group:hover .group-hover\:customName {
  color: yellow;
}
.hover\:customName:hover {
  color: yellow;
}
.focus\:customName:focus {
  color: yellow;
}