TailwindCSS的使用，看这一篇就够了！

TailwindCSS的使用，看这一篇就够了！

安装依赖

pnpm i -D tailwindcss postcss autoprefixer
# yarn add -D tailwindcss postcss autoprefixer
# npm i -D tailwindcss postcss autoprefixer

创建TailwindCSS配置文件

npx tailwindcss init -p

这一步会做两件事:

1. 创建postcss.config.js文件，这里的配置主要是添加tailwindcss的插件，这样你编写的css才会被tailwindcss处理；
2. 创建tailwind.config.js文件，主要进行扫描规则、主题、插件等配置。

为了打包时TailwindCSS能生成对应的样式文件，需要在tailwind.config.js中正确配置content字段，如以下配置将扫描 src 目录下所有以 vue/js/ts/jsx/tsx 结尾的文件。

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

引入Tailwind的基本指令

创建 styles/tailwind.css

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

main.js

import '@/styles/tailwind.css'

开始使用

<template>
  <div class="w-32 h-32 bg-blue-500">
  </div>
</template>

如上语法，你将在页面看到一个正方形的蓝色盒子

自定义class中使用Tailwind语法

有时候，你可能会因为重复的元素而不得不自定义一个class，如：

<div class="p-2 text-gray-900 font-semibold">首页</div>
<div class="p-2 text-gray-900 font-semibold">学习TailwindCSS</div>
<div class="p-2 text-gray-900 font-semibold">TailwindCSS的设计哲学</div>
<div class="p-2 text-gray-900 font-semibold">最佳实践</div>

以上写法不仅在开发时会造成重复的困扰，也不利于维护，此时我们会希望给每个元素一个class，像这样：

<div class="menu">首页</div>
<div class="menu">学习TailwindCSS</div>
<div class="menu">TailwindCSS的设计哲学</div>
<div class="menu">最佳实践</div>

现在问题来了，在为menu定制样式时，我们该怎样使用TailwindCSS语法呢？

TailwindCSS提供了@apply语法，这种语法的使用手感与在html模板中使用是一样的：

.menu {
  @apply p-2 text-gray-900 font-semibold;
}

自定义样式中使用Tailwind的变量

大多数情况下，我们完全可以组合使用Tailwind的原子化class来解决问题。但如果就是要使用自定义的样式代码，我们该如何使用到Tailwind配置中定义的变量呢？

比如下面的代码中，希望为某个元素添加一个上边框，但是又想要使用到Tailwind配置中的gray-200颜色，该怎么办呢？

div {
  border-top: 1px solid ?;
}

TailwindCSS提供了一个theme函数，可以拿到tailwind.config.js中配置的theme的值：

div {
  border-top: 1px solid theme('colors.gray.200');
}

以上代码最后会被编译为：

div {
  border-top: 1px solid #e5e7eb;
}

使用Tailwind配置之外的变量

有时候，你不得不使用一些超出Tailwind配置之外的值，当你接到一个需求：

在页面绘制一个宽139px，高77px，颜色为#165DFF的盒子。

你找遍了TailwindCSS文档，都没找到可以直接使用的原子化class，这时候可以：

<div class="w-[139px] h-[77px] bg-[#165DFF]"></div>

全面且好用的响应式方案

在TailwindCSS中写响应式简直是福音，例如这个绿色（如果你使用PC访问，将是蓝色）的盒子：

<div class="w-32 h-32 bg-green-500" />

如果要想让其在768px以上的屏幕上显示为蓝色，原始写法你需要这样：

@media (min-width: 768px) {
  div {
    @apply bg-blue-500;
  }
}

而TailwindCSS只需要一行代码：

<div class="w-32 h-32 bg-green-500 md:bg-blue-500" />

以上代码表示的含义是：默认显示绿色，在最小为md(768px)的屏幕下显示蓝色。

你甚至可以结合任意值语法，实现各种变态的响应式需求，如：

下面的这个盒子，让它在1300px以下（包含1300px）屏幕下显示绿色，以上显示蓝色。

<div class="w-32 h-32 max-[1300px]:bg-green-500 bg-blue-500"></div>

重写/覆盖Tailwind配置

Tailwind的默认配置与团队的UI规范有出入？莫担心，TailwindCSS提供了一整套的重写、覆盖默认配置的方案，细粒度到每一个属性。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

然后就可以使用了：

<span class="text-white"> 白色 </span>

不用预处理器Less和Sass怎样嵌套语法

TailwindCSS封装了postcss-nested与postcss-nesting插件，抛出了一个新的postcss插件，你只需要在postcss.config.js文件中加入以下代码，即可在css文件中使用嵌套语法了

module.exports = {
  plugins: {
    'tailwindcss/nesting': {}, // [!code focus]
    tailwindcss: {},
    autoprefixer: {},
  },
}