【发布时间】：2021-11-08 00:37:56
【问题描述】：
[2021 年 9 月 28 日更新]
我还做了什么来消除其他原因：更新操作系统包（Centos 8），重建 Apache / NGINX，重建 NPM 模块，更新和重建 TailwindCSS，尝试了默认配置文件 / json 文件，但所有这些都没有给我任何结果:-(我真的被困在这里了
[/更新]
也许我在这里忽略了一些东西。 我在 style.css 中为标题添加了一些基本样式：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
p {
@apply text-theme-gray-lighter pb-4;
}
h1 {
@apply text-3xl py-2;
}
h2 {
@apply text-2xl py-2 border-b mb-2;
}
h3 {
@apply text-xl py-1 font-semibold text-theme-blue;
}
h4 {
@apply text-lg font-semibold;
}
h3.price {
@apply text-theme-gray;
}
.boks-bold {
@apply font-semibold p-4 px-6 text-lg m-4 my-6 mt-2 border shadow-md rounded;
}
}
这个文件位于我项目的根目录。
这是我的 tailwind.config.js：
module.exports = {
variants: {
extend: {
grayscale: ['hover', 'focus'],
backgroundColor: ['checked'],
borderColor: ['checked'],
borderColor: ['focus-within'],
}
},
darkMode: 'media',
purge: ["*.jsx", "*.js", "*.php"],
plugins: [
// require('daisyui'),
// require('@tailwindcss/forms'),
require('@tailwindcss/custom-forms'),
],
daisyui: {
// styled: false,
// themes: false,
// rtl: false,
},
theme: {
customForms: theme => ({
default: {
'input, textarea, multiselect, checkbox, radio': {
borderdColor: theme('colors.gray.200'),
},
},
}),
container: {
padding: '1rem',
center: true,
},
extend: {
width: {
'full-150': '150vw',
'full-200': '200vw',
},
height: {
'18': '4.5rem',
'40rem': '40rem',
'730px': '730px',
'650px': '650px',
'1191px': '1191px',
'901px': '901px',
'722px': '722px',
'110perc': '110%',
},
maxHeight: {
'110perc': '110%',
},
zIndex: {
'-10': '-10',
},
borderWidth: {
'12': '12px',
},
colors: {
'theme-brown': '#BF8A23',
'theme-yellow': '#FAA71B',
'theme-brown-brighter': '#DDB15B',
'theme-gray': '#333333',
'theme-gray-lighter': '#444444',
'theme-blue': '#547A82',
},
minWidth: {
'0': '0',
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
'full': '100%',
},
animation: {
'scroll-rtl-slow': 'scrollbrand scroll 40s linear infinite',
},
keyframes: {
scrollbrand: {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(calc(-250px * 7))',
}
}
}
}
}
这是我的 package.json：
{
"dependencies": {
"@tailwindcss/forms": "^0.3.3",
"@tailwindcss/typography": "^0.4.1",
"autoprefixer": "^10.3.1",
"daisyui": "^1.10.0",
"node-cron": "2.0.3",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.2.6",
"vue-tailwind": "^2.4.2"
},
"scripts": {
"build-css": "tailwindcss build -i style.css -o css/style.css",
"build": "tailwindcss style.css -o css/style.css",
"production": "cross-env NODE_ENV=production tailwindcss css/style.css -o css/style.min.css"
},
"name": "templateh.sceneryworkshop.com",
"version": "1.0.0",
"main": "tailwind.config.js",
"devDependencies": {
"@tailwindcss/custom-forms": "^0.2.1",
"cross-env": "^7.0.3",
"webpack": "^5.52.1",
"webpack-cli": "^4.8.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
为了让 @apply 工作，我必须在命令中添加 -i：
*"build-css": "tailwindcss build -i style.css -o css/style.css"*
但是当我在构建生产时做同样的事情时：
"production": "cross-env NODE_ENV=production tailwindcss -i css/style.css -o css/style.min.css"
文件根本没有被清除，所以它保持它的总大小。
有人知道我在这里做错了什么吗？
【问题讨论】：
-
我实际上似乎无法重现这一点。我在codesandbox.io container 中创建了一个类似的环境。如果你运行
npm run build，它会构建它，但它不会显示它，因为它的文件太大，但如果你运行npm run production，它会构建，你可以看到生成的 css 文件只有规范化样式和我在index.jsx文件中使用的ml-2 -
我在您的示例中看到了正确的结果 :-) 但是......不幸的是，这并没有为我指明任何正确的方向 :-(
-
您能向我们展示一个 PHP 文件的任何部分，其中包含顺风类吗？ Tailwind 有一些简单的规则来确保可以清除类，所以我只想验证您的样式是否符合该标准。另外，您能否尝试设置purge option to enabled manually 并运行
build命令以确保问题不在于环境变量？
标签： css tailwind-css