Tailwind CSS清除会删除所有黑暗的类 [英] Tailwind css purge removes all dark classes

问题描述

我有一个非常简单的项目，该项目使用了几种扩展到主题的颜色.当我在tailwind.config.js文件中启用清除功能时，所有内容均应清除，但我所有的黑暗类也都清除了.

I have a pretty simple project which uses a couple of colours extended to the theme. When I enable purging in my tailwind.config.js file, everything is purged as they should, but all of my dark classes get purged too.

有人有同样的问题吗?我也在顺风的git上发现了与此相关的问题: https://github.com/tailwindlabs/tailwindcss/discussions/2793

Does anyone have the same problem? I found an issue about this on tailwind's git as well: https://github.com/tailwindlabs/tailwindcss/discussions/2793

我的资源位于

[PROJECT FOLDER]
-resources
  -js
    -components
      Login.Vue

我不知道是否值得一提，但是我为tailwind创建了一个culon scss文件，该文件导入了它的基础，组件和实用程序，并将其添加为webpack.config.js中的条目，以加快Webpack的编译速度.

I don't know if it's worth mentioning, but I made a culon scss file for tailwind which imports its base, components and utilites and added it as an entry in my webpack.config.js for faster webpack compiling.

tailwind.config.js

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: [
      './resources/js/components/**/*.vue',
      './resources/js/**/*.vue',
      './index.php'
    ],
  },
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        'raleway': ['Raleway', 'Arial', 'sans-serif']
      },
      colors: {
        'primary': '#ffc531',
        'primaryDark': '#ca9100',
        'backgroundDark': '#f2f2f2',
        'dark-text-primary': '#d2d2d2',
        'dark-background': '#292929',
        'dark-background-light': '#3e3d3d'
      }
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

package.json

package.json

{
  "scripts": {
    "watch": "npm run dev -- --watch",
    "dev": "webpack --mode development --progress",
    "build": "webpack --mode production --progress"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@vue/cli": "^4.5.8",
    "autoprefixer": "^9.0.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.1",
    "eslint": "^7.13.0",
    "eslint-plugin-vue": "^7.1.0",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "node-sass": "^5.0.0",
    "postcss-loader": "^4.0.4",
    "sass-loader": "^10.0.5",
    "style-loader": "^2.0.0",
    "tailwindcss": "^2.0.1",
    "uglify-js": "^3.11.5",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.5",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.5.1"
  },
  "dependencies": {
    "vue-router": "^3.4.9",
    "vuex": "^3.5.1"
  }
}

Login.vue

Login.vue

<template>
  <div class="flex flex-col pt-8 dark:bg-dark-background">
    <div class="flex flex-col bg-backgroundDark py-8 px-2 items-center dark:bg-dark-background-light">
      <h2 class="flex w-max font-raleway text-2xl font-extrabold dark:text-dark-text-primary">You're currently Logged Out</h2>
      <p class="flex mt-3 text-lg font-light text-center dark:text-dark-text-primary">The page you are trying to access is available for registered customers only. Please login to proceed.</p>
      <button id="loginButton" class="mt-5 bg-primary rounded ring-primary" type="button">Login</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
      }
    },
    methods: {

    }
  }
</script>

推荐答案

问题是我必须在 package.json npm脚本中设置 NODE_ENV = production 变量

The problem was that I had to set NODE_ENV=production variable in my package.json npm scripts.

"scripts": {
    ...
    "build": "NODE_ENV=production webpack --mode=production --progress"
},

这篇关于Tailwind CSS清除会删除所有黑暗的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！