顺风 css 清除所有黑暗 类
Tailwind css purge removes all dark classes
我有一个非常简单的项目,它使用了几种扩展到主题的颜色。当我在我的 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"
}
}
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>
将此添加到您的 webpack.config.js
以将您的 dark-mode
class
列入白名单
purgeCSS: {
whitelist: [
'dark-mode', //dark mode custom class name
],
},
问题是我必须在 package.json npm 脚本中设置 NODE_ENV=production 变量.
"scripts": {
...
"build": "NODE_ENV=production webpack --mode=production --progress"
},
我通过将此添加到 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
中有更多详细信息
我有一个非常简单的项目,它使用了几种扩展到主题的颜色。当我在我的 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"
}
}
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>
将此添加到您的 webpack.config.js
以将您的 dark-mode
class
purgeCSS: {
whitelist: [
'dark-mode', //dark mode custom class name
],
},
问题是我必须在 package.json npm 脚本中设置 NODE_ENV=production 变量.
"scripts": {
...
"build": "NODE_ENV=production webpack --mode=production --progress"
},
我通过将此添加到 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
中有更多详细信息