Tailwind CSS with Vue

创建Vue项目

sh 复制代码

npm create vite@latest my-project -- --template vue
cd my-project

安装Tailwind CSS，创建`tailwind.config.js`和`postcss.config.js`

sh 复制代码

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置`tailwind.config.js`

js 复制代码

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加Tailwind指令到全局css文件中，此处文件地址比如在`./src/style.css`

css 复制代码

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

在`main.js`入口引入`style.css`

js 复制代码

import { createApp } from 'vue'
import './style.css'

启动项目

sh 复制代码

npm run dev

在模板中使用tailwindcss

vue 复制代码

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

可以看到页面上此时已经有效果了。

具体使用教程可以查看官方文档。

vue中使用tailwindcss

Tailwind CSS with Vue

创建Vue项目

安装Tailwind CSS，创建tailwind.config.js和postcss.config.js

配置tailwind.config.js

添加Tailwind指令到全局css文件中，此处文件地址比如在./src/style.css

在main.js入口引入style.css

启动项目

在模板中使用tailwindcss

安装Tailwind CSS，创建`tailwind.config.js`和`postcss.config.js`

配置`tailwind.config.js`

添加Tailwind指令到全局css文件中，此处文件地址比如在`./src/style.css`

在`main.js`入口引入`style.css`