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: [],
}
相关推荐
BillKu10 小时前
vue3 样式 css、less、scss、sass 的说明
css·less·sass·scss
乖女子@@@12 小时前
css3新增-网格Grid布局
前端·css·css3
Sapphire~15 小时前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css
二十雨辰16 小时前
歌词滚动效果
前端·css
dllmayday1 天前
FontForge 手工扩展 iconfont.ttf
css·qt
BUG创建者1 天前
html获取16个随机颜色并不重复
css·html·css3
面向星辰1 天前
html中css的四种定位方式
前端·css·html
Async Cipher1 天前
CSS 权重(优先级规则)
前端·css
草字2 天前
css flex布局,设置flex-wrap:wrap换行后,如何保证子节点被内容撑高后,每一行的子节点高度一致。
前端·javascript·css
在芜湖工作的二狗子2 天前
如何用AI Agent提高程序员写作效率
css