Блог

Я создал новый проект с использованием lucky framework и хочу добавить tailwindcss. Я добавил его, выполнив следующие действия:

1. пряжа добавить попутный ветер (https://tailwindcss.com/docs/installation )
2. инициализация npx tailwindcss (https://tailwindcss.com/docs/configuration )
3. Добавлено это в webpack.mix.js (https://tailwindcss.com/docs/installation )

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

4. Добавлено следующее в 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
  

Кажется, я пропустил некоторые шаги, чтобы заставить его работать в этой среде.

Я не думаю, что ваш webpack.mix.js контент совершенно правильный.

Вы можете увидеть, как я настраиваю Tailwind CSS в приложении Lucky в этом RailsByte, но в основном:

Добавьте const tailwindcss = require("tailwindcss"); где-нибудь в верхней части webpack.mix.js .

Добавьте это в свой .options() хэш webpack.mix.js , предполагая, что ваша конфигурация Tailwind находится в корневом каталоге вашего проекта:

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

Все это в значительной степени зависит от настройки Laravel Mix в самих руководствах Tailwind, здесь: https://tailwindcss.com/docs/installation#build-tool-examples