Tailwind cdn 和安装 npm 不一致答案

【问题标题】：Tailwind cdn and isntallation npm not constistantTailwind cdn 和安装 npm 不一致
【发布时间】：2021-07-01 19:48:09
【问题描述】：

为了快速开始学习如何使用 Tailwind，我在我的项目中添加了 CDN 链接。了解了基础知识后，我决定使用 webpack 配置 tailwind。

我使用所有配置文件从头开始创建所有内容，并粘贴了上次尝试的 html 代码。当我运行代码时，发现页面看起来并不相同，配置后缺少某些类并且某些元素具有不同的属性值。

在这两种情况下，我都使用最新版本。

例子：

/* with cdn */
html {
  line-height: 1.5;
}

body {
  margin: 0;
}

.p-2\.5 {
  padding: .625rem;
}

/* with configuration */
html {
  line-height: 1;
}

body {
  margin: 8px;
}

.p-2\.5 { /* doesn't exist */ }

我的顺风配置文件看起来像这样，我可以做错的事情并不多：

/* tailwind.config.js */

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [
    './templates/**/*.php',
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

我也尝试使用命令生成的文件，但结果是相同的 - 两个页面的差异。

npx tailwindcss init --full

为什么 CDN 和配置之间存在差异。我可以以某种方式配置我的项目，使其看起来像使用 CDN 的项目吗？

【问题讨论】：

它们之间的 TailwindCSS 版本是否相同？
我想是的.. 我的 dev 上的 tailwind 配置了 2.1.0 版本，cdn 使用 @^2 所以我相信它也是最新版本..

标签： tailwind-css

【解决方案1】：

通过 CDN 使用 Tailwind

在使用 CDN 构建之前，请注意，如果不将 Tailwind 整合到您的构建过程中，许多使 Tailwind CSS 变得出色的功能将无法使用。

您无法自定义 Tailwind 的默认主题
您不能使用任何指令，例如@apply、@variants 等。
您无法启用其他变体，例如 group-focus
您无法安装第三方插件
您不能摇晃未使用的样式

要充分利用 Tailwind，您真的应该 install it as a PostCSS plugin。

【讨论】：