vue中使用tailwindcss

Tailwind CSS with Vue

tailwindcss官方文档

创建Vue项目

sh 复制代码
npm create vite@latest my-project -- --template vue
cd my-project

安装Tailwind CSS,创建tailwind.config.jspostcss.config.js

sh 复制代码
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置tailwind.config.js

js 复制代码
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加Tailwind指令到全局css文件中,此处文件地址比如在./src/style.css

css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

main.js入口引入style.css

js 复制代码
import { createApp } from 'vue'
import './style.css'

启动项目

sh 复制代码
npm run dev

在模板中使用tailwindcss

vue 复制代码
<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

可以看到页面上此时已经有效果了。

具体使用教程可以查看官方文档。

相关推荐
linkcoco10 小时前
记录h5使用navigator.mediaDevices.getUserMedia录制音视频
前端·javascript·vue·音视频·js
Pro_er11 小时前
Vue3组件通信全攻略:多种方式详解+实战场景,轻松玩转复杂数据流!
vue·前端开发
放学-别走13 小时前
基于springboot 以及vue前后端分离架构的求职招聘系统设计与实现
java·mysql·spring·vue·毕业设计·springboot·毕设
oneouto13 小时前
项目实践 之 pdf简历的解析和填充(若依+vue3)
java·vue
奶凶的小熊崽1 天前
uView UI组件库http介绍和封装
uni-app·vue·uview
Pro_er2 天前
Vue3条件与列表渲染深度解析:实战技巧助你高效开发复杂界面
vue·前端开发
小王不会写code2 天前
element-ui的组件使用
vue
ONEPEICE-ing2 天前
快速入门——状态管理VueX
前端·javascript·vue.js·vue·vuex
zdsji2 天前
如何制作安装包打包软件
算法·rust·vue
阿丽塔~2 天前
vue3 下载文件 responseType-blob 或者 a标签
前端·vue·excel