Tailwind css系列教程（三）

huazi992024-10-24 15:24

vue3环境搭建Tailwind CSS

1、创建vue3项目

创建项目：npm create vite@latest vue3app01 --template vue

进入项目文件夹：cd vue3app01

加载默认库：npm install

测试运行：npm run dev

2、搭建tailwind css

（1）引入 Tailwind

npm install -D tailwindcss postcss autoprefixer

（2）创建用于初始化 Tailwind 的配置文件------生成 tailwind.config.js、postcss.config.js

npx tailwindcss init -p

修改 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin'),
  ],
  corePlugins: {
    // 取消 tailwindcss 的默认样式
    preflight: false
  }
}

（3）编写css文件，路径自定义

src\assets\main.css

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

（4）main.js引入

import './assets/main.css'

（5）vue测试

src/comptents/helloword.vue

<template>
  <div class="w-32 h-32 bg-blue-500">
    hello
  </div>
  <h1 class="text-3xl text-red-500">Tailwind CSS</h1>
</template>

效果