rails7: 使用 tailwind css、postcss/sass

在 rails 中使用 tailwind css

创建项目

刚开始就可以创建 tailwind 项目

rails new hotwired_ats -T -d postgresql --css=tailwind --javascript=esbuild

---

添加 css bundle

• 添加 cssbunding-rails
• 添加 tailwind-rails

bin/bundle add cssbundling-rails
bin/rails css:install:tailwind

添加 dartsass-rails

直接无视 sass 的 conflict，然后

bundle add dartsass-rails
rails dartsass:install

添加 postcss

添加 postcss 以及插件

yarn add postcss-import
touch postcss.config.js

postcss 插件配置

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

基于 tailwind/form

其实是一套基于 tailwind 的 form 组件

• https://github.com/tailwindlabs/tailwindcss-forms

参考

• https://github.com/rails/cssbundling-rails
• https://github.com/rails/dartsass-rails
• https://tailwindcss.com/docs/using-with-preprocessors
• https://medium.com/@ahmednadar/setup-tailwindcss-postcss-and-esbuild-on-rails-7-d01cebaa493e
• https://tailwindcss.com/docs/guides/ruby-on-rails
• https://book.hotwiringrails.com/chapters/1
• https://github.com/tailwindlabs/tailwindcss-forms