将 tailwindcss 添加到 lucky 框架

Question

我使用 lucky 框架创建了一个新项目，想添加 tailwindcss。我使用以下步骤添加了它：

mix.postCss('src/css/main.css', 'public/css', [
  require('tailwindcss'),
])

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

当我运行 lucky dev 编译资产但文本没有像这个基本示例中那样更改：

li class: "p-3 text-orange-800" do
  text "Modify this page: src/pages/me/show_page.cr"
end

我似乎错过了一些让它在这个框架中工作的步骤。

Answer 1

我觉得你的webpack.mix.js内容不太对。

您可以在 this RailsByte 的 Lucky Application 中看到我如何设置 Tailwind CSS，但基本上：

在 webpack.mix.js 顶部的某处添加 const tailwindcss = require("tailwindcss");。

将此添加到 webpack.mix.js 中的 .options() 哈希，假设您的 Tailwind 配置位于项目的根目录中：

processCssUrls: false,
postCss: [ tailwindcss("./tailwind.config.js") ],

这些几乎都来自 Tailwind 指南本身的 Laravel Mix 设置，此处：https://tailwindcss.com/docs/installation#build-tool-examples

Add tailwindcss to lucky framework