时间戳

首页 > 解决方案 > 如何阻止 Tailwind CSS 清除本地开发环境中的类？

vue.js - 如何阻止 Tailwind CSS 清除本地开发环境中的类？

问题描述

我是vite.js构建工具，vue.js并且tailwindcss: ^2.1.4

以前一切正常，但现在我不确定我做了什么，清除没有按预期工作。即使在我的开发环境中，Tailwind 类也开始清除。假设只有在我为生产构建项目时才会清除。

假设我申请mb-10 pt-10了 div，要看到这个效果，我需要做以下两件事之一：

  1. 重启 vite.js，或者
  2. 在 css 文件中定义：.cust-class { @apply mb-10 pt-10 }然后mb-10 pt-10类将工作（一起或单独）

这是我的tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: '#000',
      white: '#fff',
    },
    extend: {},
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
  plugins: [],
};

我在其他项目中从未遇到过相同配置的问题。

谢谢你的帮助。

标签： vue.jstailwind-cssvite

解决方案

问题是由于我最近添加的 .env 文件引起的：

我已经定义了

NODE_ENV=production

我把它改成

NODE_ENV=development

现在一切正常。

推荐阅读