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>
