关于前端:vue中使用tailwindcss

Tailwind CSS with Vue

tailwindcss官网文档

创立Vue我的项目

npm create vite@latest my-project -- --template vuecd my-project

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

npm install -D tailwindcss postcss autoprefixernpx 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>

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

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