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>

效果

相关推荐
LuckySusu几秒前
【CSS篇】对position: sticky定位的深入理解
前端·css
JarvanMo6 分钟前
移动端应用代码审查:资深工程师提升质量与效率指南
前端
Gazer_S7 分钟前
【公司环境下发布个人NPM包完整教程】
前端·npm·node.js
你喜欢喝可乐吗?10 分钟前
Windows 安装 nodejs npm
前端·npm·node.js
yyds46714 分钟前
滑动窗口协议
前端·架构
LaoZhangAI16 分钟前
AI ASMR视频免费制作教程2025:TikTok爆火新趋势详解
前端·后端
LaoZhangAI16 分钟前
FLUX.1 Kontext API完全指南:文本图像编辑最强工具2025版
前端·后端
LuckySusu18 分钟前
【CSS篇】什么是 Margin 重叠问题?如何解决?
前端·css
一依不舍18 分钟前
百度文心大模型 4.5 系列开源:从技术突破到全球生态的中国力量
前端
LaoZhangAI19 分钟前
Claude 4 vs Gemini 2.5 Pro:2025年顶级AI模型权威对比分析
前端·后端