TailwindCSS - 在生产中删除的应用样式

Posted 2023-03-07

【中文标题】TailwindCSS - 在生产中删除的应用样式

【英文标题】：TailwindCSS - Applied styles removed in production

【发布时间】：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 命令以确保问题不在于环境变量？

【参考方案1】：

确保在命令中添加配置文件的路径：

"production": "cross-env NODE_ENV=production tailwindcss -c ./tailwind.config.js -i css/style.css -o css/style.min.css"

【讨论】：

感谢阿德里安，但我认为我遇到的问题与此无关。我在根目录中有所有文件，除了 JS (./scripts) - 我现在添加到配置和最终的 CSS 文件 (./css)。我也应该清除 .css 或 ./css/.css 吗？我从来没有读过它，但也许它应该

您的jsx 文件放在哪里？要正确清除，您必须放置使用顺风类的文件的正确位置。例如，php 渲染 html 的文件应该指向这个配置。

我不使用 JSX / React。此外，php 文件位于根目录中。所以没有 src、dist 文件夹什么的。

那我不明白为什么purgelist中有jsx文件。我想我找到了你的问题 - 请检查我的答案。

谢谢阿德里安！我对你的努力感到非常满意！清除设置是默认设置，这就是 JSX 存在的原因。一切正常，但是当我提供 -i 参数时，不会清除 CSS，因此文件与默认值一样大。当我删除 -i 参数时，文件大小为 33kb，但随后删除了 @applied 样式（h1、h2 等）。其他一切都按预期工作。