Vue3配置Tailwind CSS

Tailwind CSS

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

实用类

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

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

有这么多的类，你可能会认为很难记住这些类，但正如你在上面看到的，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 看更多的修饰符。

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>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/144765.html