IDEA[Vue3.x]引入[Tailwindcss3.3.3]

1.首先创建一个基础的Vue3.x项目。

2.进入项目目录，命令行运行以下命令安装tailwindcss。

npm install -D tailwindcss

3.命令行运行以下命令，创建配置文件，刷新文件列表，得到[tailwind.config.js]。

npx tailwindcss init

4.在配置文件中，添加 "./src/**/*.{html,js,vue}" 。

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

5.在src目录下，新建一个临时样式，tmp.css。src/tmp.css。并在此文件中，加入以下内容。

@tailwind base;
@tailwind components;
@tailwind utilities;

6.命令行运行下列命令，将源文件tmp.css，转化为需要的output.css。[./src/tmp.css][./src/output.css]分别为源文件和目标文件，具体路径根据自身修改，文件名可自定义。刷新后在文件列表得到[output.css]文件。此时[tmp.css]就可以删除了。

npx tailwindcss -i ./src/tmp.css -o ./src/output.css --watch

7.引入css。在main.js中引入output.css。在项目的main.js内容中添加如下内容。至此我们就引入成功了。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './output.css'//添加的内容

createApp(App).use(router).mount('#app')

8.验证：直接在.vue的文件中写入两个测试例子。样式明显不一样，引入成功。

  <p class=" text-2xl font-bold">Hello Tailwind!</p>
  <p>Hello Tailwind!</p>

 

欢迎大家讨论，作者时刻在线。