一、构建Vue项目
> npm init vue@latest
> cd <your-project-name>
> npm install
> npm run dev
二、设置IDEA JS版本
三、安装Tailwindcss
Install Tailwind CSS with Vite - Tailwind CSS
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 中
@tailwind将Tailwind 每个层的指令添加到您的文件中。 ./src/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;开始您的构建过程
使用 运行您的构建过程npm run dev。
npm run dev开始在您的项目中使用 Tailwind
开始使用 Tailwind 的实用程序类来设计您的内容。
<template>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>四、daisyUI安装
Install daisyUI as a Tailwind CSS plugin — Tailwind CSS Components
Install daisyUI
npm i -D daisyui@latestThen add daisyUI to your tailwind.config.js files
module.exports = {
//...
plugins: [require("daisyui")],
}
