TailwindCSS 正在成为市场上排名第一的 CSS 框架。无论您喜欢与否，它都被用于越来越多的应用程序中，并且它也成为一些流行项目的默认设置。由于其简单性和许多开发人员体验改进，Tailwind 加入了 DX Gang 并在那里有一个安全的位置。
在本文中，我想指导您完成将 TailwindCSS 添加到您的 Vue Storefront 项目的过程。它可以用作 Storefront UI 样式的替代品，也可以与它一起使用。
Vue店面
如果您还不熟悉 Vue Storefront，它是适用于 Headless Commerce 的闪电般快速的前端平台。使用 Vue Storefront（您将永远需要的最后一个前端）提升您的网站性能、塑造客户旅程并释放开发人员的创造力。
你可以在这里查看更多信息：
店面用户界面
Vue Storefront 默认使用一个非常有用的 UI 库，称为 Storefront UI。它是根据谷歌零售报告和专门为电子商务设计的。它确实是可定制的，并且可以将您的电子商务应用程序的开发加速一英里！
你可以在这里读更多关于它的内容：
将 TailwindCSS 添加到 VSF
由于 Vue Storefront 在后台使用 Nuxt.js，因此将其添加到您的项目的过程相对简单。尤其是最近发布了适用于 Nuxt 的新版 Tailwind 模块，您可以在此处查看代码。在此版本中，您无需在 nuxt 应用程序中注册 tailwind 配置或 postcss 配置即可使其工作。那是多么的辉煌？
为了在 Vue Storefront 应用程序中安装 Tailwind 模块，我们需要运行：
yarn add @nuxtjs/tailwindcss # npm install @nuxtjs/tailwindcss
然后，我们需要在nuxt.config.js文件的modules数组中注册它：
modules : [ // Other modules ' @nuxtjs/tailwindcss ' ],
最后，为了测试它是否有效，我们可以在包装器组件中添加一些 Tailwind 样式：
<div id= "home" class= "bg-blue-300" >
这应该是一个结果：
概括
做得好！您已成功将 TailwindCSS 添加到您的 Vue Storefront 项目中。但是请记住，Storefront UI 的设计目的不是开箱即用的 TailwindCSS，因此为了替换样式，您必须调整几个 CSS 变量， 此处描述了此过程
原文： https://dev.to/vue-storefront/how-to-add-tailwindcss-to-vue-storefront-2-1i7j