在你所有的项目中都加入 TailwindCSS 吧！

---

前言

使用 Tailwind，您可以通过直接在 HTML 中应用预先存在的类来设置元素的样式

这也是所谓的使用功能类构建自定义设计而无需编写 CSS

---

先把一些有用的链接放出来

tailwind 中文文档

tailwind 在线运行

tailwind UI

一、配置文件

1. 简单安装

要先安装 tailwindcss，可以用在你的 vue/nuxt 项目中加入，我甚至用在了 uni-app 中

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

一般情况下会需要在你项目根目录中有以下两个配置文件

1. postcss.config.js

postcss 配置中可以加入一些插件，来作为样式预处理器，也可写在 package.json 或 vite.config.js 中

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}
1
2
3
4
5
6
7

2. tailwind.config.js

主要配置文件，可以在里面配置插件，扩展样式等

配置文档

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

1
2
3
4
5
6
7
8

2.引用样式

方式一：直接引入 tailwind 下自带 css，方便快捷，无需其他命令去处理生产

有了以上两个配置文件，那么我们就应该引入样式文件了，可以在 main.ts 文件中引用

下面分别引用了 element-plus、tailwind、项目样式

// main.ts
// import 'element-plus/dist/index.css'
import 'tailwindcss/tailwind.css'
// import '@/assets/styles/app.scss'
1
2
3
4

方式二：定义入口 css 和出口 css，什么意思呢，请向下看

在 public/static/css 下新建 tailwind.css 和 tailwinds.css 文件

tailwinds.css 作为源文件，内容如下

@tailwind base;
@tailwind components;
@tailwind utilities;
1
2
3

tailwind.css 文件内容则是你项目所有页面用到的tailwind样式，不过这些需要你在 tailwind.config.js 中配置 content 值并调用命令编译才可以得到

tailwind.config.js 配置如下：

扫描 src 目录下所有 html 文件和 tsx 文件

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.tsx'
  ],
  darkMode: false,
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}
1
2
3
4
5
6
7
8
9
10
11
12

命令如下：

写在 package 中，可用 npm 或 pnpm 去执行

"scripts": {
	"css": "npx tailwindcss -o ./public/static/css/tailwind.css",
	"css:i": "npx tailwindcss -i ./public/static/css/tailwinds.css -o ./public/static/css/tailwind.css",
	"css:w": "npx tailwindcss -o ./public/static/css/tailwind.css --watch",
}
1
2
3
4
5

3. 其余

在 Nuxt 中安装 nuxtjs tailwind

二、使用样式

来简单展示一下，使用的是 tsx 语法

1.样式说明

bg-white: 背景白色
h-1/2: 设置高度
text-red-500: 文本颜色
btn-1: 自定义组合样式

2.组合样式

上面 btn-1 代码如下，一个 scss 文件，使用 @apply 即可

hover: 代表鼠标悬浮后的样式

.btn-1 {
  @apply bg-white hover:bg-gray-200 border-2 font-bold p-2 m-2 rounded;
}
1
2
3

三、扩展样式

想要扩展一些样式，比如 bg-mypng 显示我们自己的背景图需要在 tailwind.config.js 中加入对应的内容

简单列举一下扩展样式，将样式加在 config 中的 theme.extend 中

配置如下：

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}',],
  darkMode: 'media',
  theme: {
    extend: {
      backgroundImage: {
        'banner-main': 'url(\'@/assets/imgs/banner-main.png\')',
        'banner-main-left': 'url(\'@/assets/imgs/banner-main-left.png\')',
        'banner-main-right': 'url(\'@/assets/imgs/banner-main-right.png\')',
      },
      backgroundSize: { '100%': '100% 100%', },
      animation: {
        jump1: 'jump1 1.2s ease-in infinite',
      },
      keyframes: {
        jump1: {
          '0%, 100%': {
            transform: 'translateY(-10%)',
            'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1)',
          },
          '50%': {
            transform: 'translateY(0)',
            'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)',
          },
        },
      },
      transitionDelay: {
        2: '20000ms',
        5: '50000ms',
      },
    },
  },
  variants: {},
  plugins: [],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

---