@vue/cli 安装taiwind2025版本 @vue/cli@5 taiwind@4.1 今天给旧项目装上taiw

版本

@vue/cli@5
taiwind@4.1

今天给旧项目装上taiwindcss适配手机端,需要禁用reset样式,官网没有对应的集成案例,vue-cli带有postcss,所有按postcss来继承 @tailwindcss/postcss

npm install tailwindcss @tailwindcss/postcss

postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {},
        '@tailwindcss/postcss': {}
    }
};

tailwind.scss 需要的可加上@import "tailwindcss/preflight.css" layer(base),旧项目影响大,所以一般不加

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
// @import "tailwindcss/preflight.css" layer(base); // 禁用reset样式
@import "tailwindcss/utilities.css" layer(utilities);

main.js引入样式 tailwind.scss