将tailwindcss添加到幸运框架

Posted 2023-03-07

【中文标题】将tailwindcss添加到幸运框架

【英文标题】：Add tailwindcss to lucky framework

【发布时间】：2021-02-06 22:38:48

【问题描述】：

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

纱线添加tailwindcss (https://tailwindcss.com/docs/installation) npx tailwindcss 初始化 (https://tailwindcss.com/docs/configuration) 将此添加到 webpack.mix.js (https://tailwindcss.com/docs/installation)

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

将以下内容添加到src/css/main.css：

@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

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

【参考方案1】：

我认为您的webpack.mix.js 内容不太正确。

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

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

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

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

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

【讨论】：

谢谢您，使用 RailsByte 可以省去所有辛苦的工作。奇迹般有效。 :-)