tailwind css不起作用

LxsZxh commented 1 year ago

去掉vite.config.js的如下代码可以生效，但会影响样式，有好一点的解决办法吗？ css: { postcss: { plugins: [ { postcssPlugin: 'internal:charset-removal', AtRule: { charset: (atRule) => { if (atRule.name === 'charset') { atRule.remove() } }, }, }, ], }, },

sendking commented 1 year ago

unocss

LxsZxh commented 1 year ago

unocss

unocss不会受上面的规则影响吗

yangzongzhuan commented 11 months ago

前后端分离版本问题请到这里提问 https://gitee.com/y_project/RuoYi-Vue/issues 需要提供出能复现问题详细步骤。

whidy commented 9 months ago

@LxsZxh 我看了下，根据TailwindCSS的文档：Install Tailwind CSS with Vite

他会创建一个postcss.config.js文件

而vite配置中，也就是你发的这个配置覆盖了他，导致了问题。故而，我们可以这样做：

首先删除你上面发的配置，然后修改postcss.config.js，讲若依自带的内置插件追加进去，比如改成这样：

/** @type {import('postcss-load-config').Config} */
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

const config = {
  plugins: [
    tailwindcss,
    autoprefixer,
    {
      postcssPlugin: "internal:charset-removal",
      AtRule: {
        charset: (atRule) => {
          if (atRule.name === "charset") {
            atRule.remove();
          }
        },
      },
    },
  ],
};

export default config;

我自己测试是没有问题的，更多学习可以参考：

当然根本原因我推测是因为vite.config.js配置postcss这段覆盖了postcss.config.js所致。

另外友情提示，引入的TailwindCSS的样式建议放在element的样式之前，防止EP的样式覆盖，具体可以参考我之前写的Vite搭建的ElementPlus和TailwindCSS项目

LxsZxh commented 9 months ago

感谢回复，我现在去试一下

------------------ 原始邮件 ------------------ 发件人: "yangzongzhuan/RuoYi-Vue3" @.>; 发送时间: 2023年12月29日(星期五) 中午1:55 @.>; @.**@.>; 主题: Re: [yangzongzhuan/RuoYi-Vue3] tailwind css不起作用 (Issue #223)

@LxsZxh 我看了下，根据TailwindCSS的文档：Install Tailwind CSS with Vite

他会创建一个postcss.config.js文件

而vite配置中，也就是你发的这个配置覆盖了他，导致了问题。故而，我们可以这样做：

首先删除你上面发的配置，然后修改postcss.config.js，讲若依自带的内置插件追加进去，比如改成这样： export default { plugins: [ { //fix:error:stdin>:7356:1: warning: @.***" must be the first rule in the file postcssPlugin: "internal:charset-removal", AtRule: { charset: (atRule) => { if (atRule.name === "charset") { atRule.remove(); } }, }, }, require("tailwindcss"), require("autoprefixer"), ], };
我自己测试是没有问题的，更多学习可以参考：

PostCSS AtRule

PostCSS的配置文件

当然根本原因我推测是因为vite.config.js配置postcss这段覆盖了postcss.config.js所致。

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

yangzongzhuan / RuoYi-Vue3

tailwind css不起作用 #223