Tailwind css 文件非常大 2.42 mib 我如何使用 laravel 减小这个文件的大小？答案

【问题标题】：Tailwind css file very big 2.42 mib how can i reduce size this file am using laravel?Tailwind css 文件非常大 2.42 mib 我如何使用 laravel 减小这个文件的大小？
【发布时间】：2020-12-16 05:11:47
【问题描述】：

Tailwind css 文件非常大 2.42 mib 我如何使用 laravel 减小这个文件的大小？

【问题讨论】：

你尝试过使用 PurgeCSS 吗？但首先，您需要在项目中安装 Tailwind。 medium.com/@wearethreebears/…

标签： laravel tailwind-css

【解决方案1】：

编辑您的 tailwind.config.js 并设置 purge.enabled = true：

const tailwindcss = require('tailwindcss');
module.exports = {
 purge: {
    enabled: true,
    content: ['./src/**/*.{vue,js,ts,jsx,tsx}']
  },
 ...
};

Tailwind CSS - Optimizing for Production

【讨论】：

【解决方案2】：

最好的策略是根据您的需要生成特定的 CSS 并将其部署在您自己的 CDN 上

下面的示例解释了如何为简单的 Html 项目配置 TailwindCSS

第一步：创建 package.json 文件

yarn init

添加 tailwindcss postcss-cli 和 autoprefixer

yarn add tailwindcss postcss-cli autoprefixer -D

yarn add tailwindcss postcss-cli autoprefixer -D

为 TailwindCSS 创建默认配置文件

npx tailwind init tailwind.js -full

创建 postcss.config.js 文件

touch postcss.config.js

编辑 postcss.config.js

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
 purge: [
    './src/**/*.html',
  ],
};

如下创建tailwind.css

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

使用 postcss 生成样式表 style.css

npx postcss tailwind.css -o style.css

在您的项目中使用样式表

<html>
 <head>
    <link rel="stylesheet" href="style.css"/>
    </head>
 <body>
     <h1>Hello world</h1>
</body>
</html>

在 CDN 上部署 style.css

（可能的 CDN：CloudFront / Netlify）

【讨论】：

PurgeCSS 通过清除未使用的样式来减小文件最终 css 文件的大小 tailwindcss.com/docs/controlling-file-size