vite配置tailwindcss

这里以vue3为例,其他的框架只要是vite配置的也可参考这个

项目创建

Vite 需要 Node.js 版本 18+20+

js 复制代码
npm create vite@latest my-vue-app

创建完执行命令运行项目

bash 复制代码
 cd my-vue-app
 npm install
 npm run dev

项目正常运行即可

安装和初始化tailwindcss相关插件

安装相关插件

js 复制代码
npm install -D tailwindcss postcss autoprefixer

初始化命令

bash 复制代码
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: [],
}

引入配置

方式一:在App.vue进行引入

js 复制代码
<script setup>
</script>

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

方式二:也可以单独建一个css文件,内容就是下面代码的style标签内的代码,然后在main.js里面导入这个css文件,例如在src/style.css里面加的下面三行代码,则在main.js里面新增import './style.css'即可,这里个人写习惯了,直接在App.vue里面写了

上面配置完之后,启动项目npm run dev后就可以在页面使用tailwindcss的类样式了

vscode提示插件Tailwind CSS IntelliSense

下面贴一份个人使用的tailwind.config.js的默认配置

js 复制代码
module.exports = {
  content: [
      "./index.html",
      "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
      extend: {
          colors: { // 背景颜色和文本颜色  bg-blue text-white 等
            blue: 'blue',
            white: 'white',
            pink:'pink'
          },
          width: (() => { // 元素宽度 w-0(0rem) - w-1000(rem)  宽高范围跟着UI图走的
            const widths = {};
            for (let i = 0; i <= 750; i++) {
              widths[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值
            }
            return widths;
          })(),
          height: (() => { // 元素高度 h-0(0rem) - h-1448(1448rem)   宽高范围跟着UI图走的
            const height = {};
            for (let i = 0; i <= 1448; i++) {
              height[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值
            }
            return height;
          })(),
          fontSize: (() => { // 字体大小 text-0(0rem) - text-100(100rem) 
            const fontSize = {};
            for (let i = 0; i <= 1000; i++) {
              fontSize[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值
            }
            return fontSize;
          })(),
          lineHeight: (() => { // 行高值 leading-5
            const lineHeight = {};
            for (let i = 0; i <= 300; i++) {
              lineHeight[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值
            }
            return lineHeight;
          })(),
          spacing: (() => { // 上下左右间距 left/right/bottom/top left-60
            const spacing = {};
            for (let i = 0; i <= 1448; i++) {
              spacing[`${i}`] = `${i}rem`;
            }
            return spacing;
          })(),
          margin: (() => { // 上下左右间距
            const margin = {};
            for (let i = 0; i <= 750; i++) {
              margin[`${i}`] = `${i}rem`;
            }
            return margin;
          })(),
          zIndex: (() => { // 层级
            const zIndex = {};
            for (let i = 0; i <= 100; i++) {
              zIndex[`${i}`] = `${i}`;
            }
            return zIndex;
          })()
      },
  },
  plugins: [],
}
相关推荐
_GR39 分钟前
Qt开发⑧Qt的窗口_下_浮动窗口+对话框
开发语言·css·c++·qt·microsoft
林的快手4 小时前
CSS默认样式
前端·css·vue.js·chrome·css3
CUIYD_19894 小时前
CSS 日常开发常用属性总结
前端·css
昨日余光11 小时前
仅需三分钟,使用Vue3.x版本组件式风格实现一个消息提示组件!
前端·javascript·css·vue.js·typescript·html
Fri_11 小时前
CSS 实现波浪效果
前端·javascript·css
Y_3_711 小时前
30 分钟从零开始入门 CSS
开发语言·前端·css·人工智能·python·tensorflow
IT、木易12 小时前
大白话css第二章深入学习
前端·css·学习
爱写代码的派大星14 小时前
css实现左右切换平滑效果
前端·css
软件技术NINI21 小时前
html css js网页制作成品——HTML+CSS甜品店网页设计(5页)附源码
javascript·css·html
Json____1 天前
使用前端 html css 和js 开发一个AI智能平台官网模板-前端静态页面项目
前端·css·html·前端模板·静态网站