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>

效果

相关推荐
慧一居士32 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead34 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app