关于前端:vue中使用tailwindcss

Tailwind CSS with Vue

tailwindcss 官网文档

创立 Vue 我的项目

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

装置 Tailwind CSS，创立 tailwind.config.js 和postcss.config.js

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

配置tailwind.config.js

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

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

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

在 main.js 入口引入style.css

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

启动我的项目

npm run dev

在模板中应用 tailwindcss

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

能够看到页面上此时曾经有成果了。

具体应用教程能够查看官网文档。