tailwindcss @4和@3版本项目引入,及自定义配置

背景

tailwindcss已经升级到@4版本,并且已经成为了默认的版本,较于@3版本引用及自定义配置均有了变化,下面我们就对比下这两个版本的引用不同点

本文已 vue3 vite框架来做试验

vue3 vite tailwindcss@3 版本

初始化项目

js 复制代码
npm create vite@latest  --template vue
cd vue
npm install
npm run dev

安装tailwindcss@3 和 postcss 引入

js 复制代码
npm install -D tailwindcss@3  postcss autoprefixer 
// 初始化引用
npx tailwindcss init -p

以上配置后,会在根目录生成 postcss.config.js tailwind.config.js,src目录下创建index.css tailwind.css

postcss.config.js配置如下

js 复制代码
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js配置如下

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

tailwind.css配置如下

js 复制代码
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

index.css配置如下

js 复制代码
@import url('tailwind.css');

main.ts引入 index.css

js 复制代码
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 注意此处
import "./index.css"

createApp(App).mount('#app')

app.vue中 写入tailwindcss 类名 即可,可以看见效果 如

js 复制代码
<div class="flex justify-center text-red-400">11111111</div>

自定义tailwindcss配置

tailwind.config.js配置如下

js 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // 自定义宽度类
      width: {
        ...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义高度类
      height: {
        ...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义 padding 类
      padding: {
        ...Array.from({ length: 150 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义 margin 类
      margin: {
        ...Array.from({ length: 100 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义 font-size 类
      fontSize: {
        ...Array.from({ length: 50 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      }
    },
  },
  plugins: [],
};

以上配置 我们将fontSize margin 等改为了固定宽度,此时安装 postcss-px-to-viewport可以进行适配

js 复制代码
npm install postcss-px-to-viewport

postcss.config.js配置如下

js 复制代码
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度,即小数点位数
      propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw
      selectorBlackList: [], // 指定不转换为视窗单位的类名,
      minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
      // replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  },
}

我们写入css类别 ,查看适配已经配置完成

js 复制代码
  <div class="flex justify-center text-red-400 mr-20 w-100">11111111</div>

vue3 vite tailwindcss@4 版本

初始化项目

js 复制代码
npm create vite@latest  --template vue-2
cd vue
npm install
npm run dev

4版本采用插件安装

js 复制代码
npm install tailwindcss @tailwindcss/vite

vite.config.ts配置如下

js 复制代码
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), tailwindcss()],
});

src常见 index.css 并index.js 引入 index.css 配置如下

js 复制代码
@import "tailwindcss";

app.vue写入类名,效果如下已经引入

js 复制代码
<span class="flex text-red-400">tailwindcss4</span>

自定义样式

index.css

js 复制代码
@import "tailwindcss";

@config "../tailwind.config.js";

添加 tailwind.config.js 配置如下

js 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // 自定义宽度类
      width: {
        ...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义高度类
      height: {
        ...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义 padding 类
      padding: {
        ...Array.from({ length: 150 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义 margin 类
      margin: {
        ...Array.from({ length: 100 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      },
      // 自定义 font-size 类
      fontSize: {
        ...Array.from({ length: 50 }, (_, i) => i + 1).reduce((acc, num) => {
          acc[num] = `${num}px`;
          return acc;
        }, {})
      }
    },
  },
  plugins: [],
};
js 复制代码
  <span class="flex text-red-400 w-100">tailwindcss4</span>

postcss适配可以自行引入

相关推荐
工业甲酰苯胺6 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang6 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止7 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms7 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登7 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in7 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4169 小时前
HTML面试题
前端·html
张可9 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课9 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登10 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js