Tailwind css系列教程(三)

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>

效果

相关推荐
太过平凡的小蚂蚁1 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
咖啡の猫2 小时前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳2 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng3 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪3 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛3 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能3 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost3 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
trsoliu3 小时前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程
云中雾丽3 小时前
react-checkbox的封装
前端