css - Tailwind css purge 删除所有深色类

Question

我有一个非常简单的元素，它使用了几种扩展到主题的颜色。当我在 tailwind.config.js 文件中启用清除时，所有内容都会按其应有的方式清除，但我所有的暗类也会被清除。

有人有同样的问题吗？我在 tailwind 的 git 上也发现了一个关于此的问题:https://github.com/tailwindlabs/tailwindcss/discussions/2793

我的资源位于

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

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

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

{
  "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"
  }
}

登录.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>

Answer 1

我通过将其添加到 tailwind.config.js 来修复此问题:

    options: {
      safelist: ['dark'],
    },

现在看起来像:

module.exports = {
  purge: {
    content: ['./public/**/*.html', './src/**/*.vue'],
    options: {
      safelist: ['dark'],
    },
  },
  darkMode: 'class',
  // ...
}

https://github.com/tailwindlabs/tailwindcss/discussions/2793中有更多关于它的细节。