Vue3配置Tailwind CSS

超、凢脫俗 2023-09-27 21:53 88阅读 0赞

## Tailwind CSS ##

Tailwind是由Adam Wathan领导的TailwindLabs开发的 CSS 框架。

### 实用类 ###

Tailwind 附带了大量实用类。将它们组合起来并调整样式是使用 Tailwind 进行样式设置的一大特点。实用类以相当小的单元准备，因此大多数样式都可以通过仅组合实用类来实现。

<table> 
 <thead> 
  <tr> 
   <th>Tailwind 实用类</th> 
   <th>用 CSS 写</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text-red-50</td> 
   <td>color: rgb(254 226 226)</td> 
  </tr> 
  <tr> 
   <td>text-red-100</td> 
   <td>color: rgb(254 202 202)</td> 
  </tr> 
  <tr> 
   <td>text-red-200</td> 
   <td>color: rgb(252 165 165)</td> 
  </tr> 
  <tr> 
   <td>text-red-300</td> 
   <td>color: rgb(254 226 226)</td> 
  </tr> 
  <tr> 
   <td>text-red-400</td> 
   <td>color: rgb(248 113 113)</td> 
  </tr> 
  <tr> 
   <td>text-red-500</td> 
   <td>color: rgb(239 68 68)</td> 
  </tr> 
  <tr> 
   <td>text-red-600</td> 
   <td>color: rgb(220 38 38)</td> 
  </tr> 
  <tr> 
   <td>text-red-700</td> 
   <td>color: rgb(185 28 28)</td> 
  </tr> 
  <tr> 
   <td>text-red-800</td> 
   <td>color: rgb(153 27 27)</td> 
  </tr> 
  <tr> 
   <td>text-red-900</td> 
   <td>color: rgb(127 29 29)</td> 
  </tr> 
 </tbody> 
</table>

有这么多的类，你可能会认为很难记住这些类，但正如你在上面看到的，`text-red-50` Tailwind 的实用类名称是这样命名的，这样你就可以很容易地想象要应用的样式。

### 修饰符 ###

Tailwind提供多种变体，包括`active`, `hover`将这些添加到实用程序类可以实现更高级的样式。

例如，如果您希望鼠标悬停时颜色稍深，单击时颜色更深，请按如下方式指定类：`hover:`，给定的类将在悬停时应用。`active:`将在元素处于活动状态时应用给定的类。

bg-blue-700 hover:bg-blue-800 active:bg-blue-900

可以查看文档：[Handling Hover, Focus, and Other States - Tailwind CSS][Handling Hover_ Focus_ and Other States - Tailwind CSS] 看更多的修饰符。

### tailwind.config.js ###

可以通过在 Tailwind 的配置文件`tailwind.config.js`中指定选项来自定义整体配置。

安装Tailwind后执行以下命令，会在根目录下自动创建一个配置文件。

npx tailwindcss init -p

以下是配置的部分选项

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

### 构建优化 ###

Tailwind 有大量的实用类，并使用必要的类来进行样式设置，但担心如果加载所有实用类，构建大小会增加。可以通过配置`content`选项来解决。

在下面的示例中，根目录中的 `index.html`和扩展名为 vue、js、ts、jsx 和 tsx 的文件是构建优化的目标。

module.exports = {
      // ...
      content: [
        './index.html',
        './src/**/*.{vue,js,ts,jsx,tsx}'
      ],
    }

### 主题定制 ###

也可以在`tailwind.config.js`中配置置顶的颜色和字体。

自定义颜色

module.exports = {
      // ...
      // 添加主题色
      theme: {
        extend: {
          colors: {
            whopper: '#8a1216'
          },
        },
      },
    }

添加后,在页面上使用

<div class="flex h-screen items-center justify-center bg-gray-200">
      <p class="font-bold text-whopper">
        Hello Tailwind
      </p>
    </div>

### 黑暗模式 ###

添加`dark:`，轻松实现暗模式。

<div class="flex h-screen items-center justify-center bg-gray-200 dark:bg-gray-700">
      <p class="font-bold text-blue-900 dark:text-blue-100">
        Hello Tailwind
      </p>
    </div>

`tailwind.config.js`可以通过在选项`darkMode`中指定media或来class设置暗模式切换。

module.exports = {
      // ...
      darkMode: // 'media' or 'class'
    }

设置为media，则跟随操作系统的设置。

指定为class，给父元素加上`dark`的类，`dark:`才会有效果，如下列子：

// 暗黑模式不生效
    <div>
      <div class="flex h-screen items-center justify-center bg-gray-200 dark:bg-gray-700">
        <p class="font-bold text-blue-900 dark:text-blue-100">
          Hello Tailwind
        </p>
      </div>
    </div>
    
    // 暗黑模式生效
    <div class="dark">
      <div class="flex h-screen items-center justify-center bg-gray-200 dark:bg-gray-700">
        <p class="font-bold text-blue-900 dark:text-blue-100">
          Hello Tailwind
        </p>
      </div>
    </div>

还有更多的配置，可以去文档看。

## Vue3配置Tailwind ##

### 1、安装 ###

安装 Tailwind 及其依赖项 postcss 和 autoprefixer。

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

### 2、创建配置文件 ###

npx tailwindcss init -p

会在项目根目录下生成`postcss.config.js`和`tailwind.config.js`文件。

*  `tailwind.config.js`

module.exports = {
      content: [
        './index.html',
        './src/**/*.{vue,js,ts,jsx,tsx}'
      ],
      darkMode: 'media',
      theme: {
        extend: {},
      },
      variants: {
        extend: {},
      },
      plugins: [],
    };

*  `postcss.config.js`

module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    }

### 使用 ###

我们可以在`src/`目录下面的`index.css`文件中引入类

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

然后再`main.js`文件中引入

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

### 测试 ###

<template>
      <div
        class="flex h-screen items-center justify-center bg-white dark:bg-gray-800"
      >
        <button
          class="py-4 px-6 w-96 font-bold font-mono rounded-md transition-all text-white bg-blue-700 hover:bg-blue-800 active:bg-blue-900 dark:text-black dark:bg-blue-400 dark:hover:bg-blue-500 dark:active:bg-blue-600"
        >
          Hello Tailwind
        </button>
      </div>
    </template>

[Handling Hover_ Focus_ and Other States - Tailwind CSS]: https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference