css - Tailwind css purge 删除了所有黑暗类
问题描述
我有一个非常简单的项目,它使用了几种扩展到主题的颜色。当我在 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: [],
}
包.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>
解决方案
我通过将其添加到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中有更多详细信息
推荐阅读
- python - Python中的类似函数不会产生相同的结果
- java - log4j 将日志写入文件
- openlayers - 检查坐标是否在 OL 中某个特征的边界上
- python - COSMO 的 MetPy 和旋转纬度经度网格?
- c++ - 当等效函数只调用一次时,为什么转换运算符调用复制构造函数两次?
- android - Firestore:检查虚拟文档是否存在
- r - 如果变量已经是整数,为什么 R 返回我的变量必须是整数的错误?
- node.js - axios 和 Azure Application Insights 的问题
- javascript - 通过对象键循环的函数抛出未定义
- mysql - 结果集结束后的 Java Sql 异常