01Vue3引入tailwindcss版本2

# Vue3 引入 tailwindcss 版本 2

安装tailwindcss库

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat "postcss@^7" "autoprefixer@^9"

# yarn add vue-loader-v16

1
2
3

新建tailwind.config.js
新建postcss.config.js

npx tailwindcss init -p

代码

// tailwind.config.js
module.exports = {
  purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

1
2
3
4
5
6
7
8
9
10
11
12

//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

1
2
3
4
5
6
7

新建tailwind.css文件

/* src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

1
2
3
4

引入main.js

import "./tailwind.css";

测试使用

<!-- src/App.vue -->
<template>
  <div class=" bg-red-600 h-screen"></div>
</template>

1
2
3
4

启动项目

npm run serve
# 或
yarn serve

1
2
3

# 定制自己的Tailwind CSS

// fontSize
    komabig: ['10rem', { lineHeight: '10rem' }],
...
// 定制一个新的主题
theme: {
    extend: {
      colors: {
        bootstrap_primary: '#0d6efd',
        bootstrap_secondary: '#6c757d',
        bootstrap_success: '#198754',
        bootstrap_danger: '#dc3545',
        bootstrap_info: '#0dcaf0',
      }
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14

App.vue

<div class="text-komabig">小马大字体</div>
<div class="bg-bootstrap_primary text-white">像我么</div>
<div class="bg-bootstrap_success text-white">像我么</div>
<div class="bg-bootstrap_danger text-white">像我么</div>

1
2
3
4

打包如何出现空白就添加以下代码

//vue.config.js
module.exports = {
  publicPath: "./",
};

1
2
3
4

编辑

上次更新: 2023/08/06, 00:38:41

← 02Vue引入Bootstrap4