rails: 添加 tailwindcss

安装 rails 的 gem

bundle add tailwindcss-rails

利用 install 脚本

rails tailwindcss:install

And now you can run bin/rails tailwindcss:watch to rebuild the CSS files on file changes.

If you use CSS classes in a directory not watched by default, you can add that to config/tailwind.config.js under the content key:

# config/tailwind.config.js
...
content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './config/**/*.rb',
],
...

And to make your workflow even smoother, you can use Foreman to manage all the necessary processes for you. To set that up is also pretty simple. Create a bin/dev file with the following content:

#!/usr/bin/env sh

if ! gem list foreman -i --silent; then
  echo "Installing foreman..."
  gem install foreman
fi

# Default to port 3000 if not specified
export PORT="${PORT:-3000}"

# Let the debug gem allow remote connections,
# but avoid loading until `debugger` is called
export RUBY_DEBUG_OPEN="true"
export RUBY_DEBUG_LAZY="true"

exec foreman start -f Procfile.dev "$@"

Then create a file named Procfile in the root of your project with the following content:

web: bin/rails server
css: bin/rails tailwindcss:watch

启动

bin/dev