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>

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

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

相关推荐
一个处女座的程序猿O(∩_∩)O11 小时前
《深入探索Vben框架:使用经验与心得分享》
vue
Pro_er1 天前
Vue3 性能优化十大技巧:打造高性能应用的终极指南
vue·前端开发
Pro_er2 天前
Vue3响应式编程三剑客:计算属性、方法与侦听器深度实战指南
vue·前端开发
假装我不帅2 天前
tailwindcss学习03
tailwindcss·自适应
鑫~阳2 天前
Vue2是如何利用Object.defineProperty实现数据的双向绑定?
前端·vue.js·vue
寰宇软件2 天前
PHP房屋出租出售高效预约系统小程序源码
前端·小程序·uni-app·vue·php
爱学习的小王!3 天前
nvm安装、管理node多版本以及配置环境变量【保姆级教程】
经验分享·笔记·node.js·vue
程序员小续3 天前
Excel 表格和 Node.js 实现数据转换工具
前端·javascript·react.js·前端框架·vue·excel·reactjs
胖头鱼不吃鱼-3 天前
开源低代码平台与 Vue.js
开源·vue
零凌林3 天前
WEB前端将指定DOM生成图片并下载最佳实践(html2canvas)
前端·vue·html2canvas·blob·图片下载·dom转图片