Tailwind css文件非常大2.42 mib如何缩小此文件的大小我正在使用laravel？

---

Tailwind css文件非常大2.42 mib如何缩小此文件的大小我正在使用laravel？

简单，不要使用它。从概念上讲，Tailwind非常大，在cdn中无法使用，同时又不会失去它的最佳特性

通过CDN使用顺风

您不能自定义Tailwind的默认主题

您不能使用诸如@apply、@variants等任何指令

无法启用组悬停等功能

你不能安装第三方插件

你不能改变未使用的样式

@

---

如果您使用它，请确保正确配置了css/js文件的navigator缓存时间，否则您的网站用户会有不好的体验。

最佳策略是使用生成特定于您需要的css，并将其部署到您自己的CDN上

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

第一步：创建package.json文件

纱线初始化

添加tailwindcss postsss cli和autoprefixer

纱线添加tailwindcss postsss cli autoprefixer-D

纱线添加tailwindcss postcss cli autoprefixer-D

为TailwindCSS创建默认配置文件

npx tailwind init tailwind.js-完整

创建postsss.config.js文件

touch postss.config.js

编辑postss.config.js文件

const tailwindcss=require（'tailwindcss'）；
module.exports={
插件：[
tailwindcss（'./tailwind.js'），
需要（'autoprefixer'）
],
清除：[
“./src/***.html”，
],
};

创建一个tailwind.css，如下所示

@import“tailwindcss/base”；
@导入“tailwindcss/components”；
@导入“tailwindcss/utilities”；

使用postcss生成样式表style.css

npx postsss tailwind.css-o style.css

在项目中使用样式表

你好，世界

在CDN上部署style.css

---

（可能的CDN:CloudFront/Netlify）

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

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

---

您是否尝试使用PurgeCSS？但首先，您需要在项目中安装Tailwind。PurgeCSS通过清除未使用的样式来减小文件最终css文件的大小