We recently decided to use Tailwind CSS for our
Ember app at work and it really struck a chord with me. That's why I decided to try it in Ruby on Rails.
As you are here you are probably already hyped to get started with Tailwind CSS in your Rails app but if
you still need convincing A wrote Adam Wathan about it, CSS Utility Classes and "Separation of Concerns.
If you want to create a new app you can pass the
--webpack option as of Rails 5.1
rails new myapp --webpack
Otherwise just add the webpacker gem.
gem 'webpacker', '~> 3.0'
bundle exec rails webpacker:install
yarn add --dev autoprefixer tailwindcss
Webpacker lives in
create the default tailwind configuration file.
Then we add the tailwind config to
application.css. You can find it at https://tailwindcss.com/docs/installation
Now we need to add our post css plugins to webpacker.
And add our new folders to
Import the css file in webpackers entrypoint.
And then link to the new files
<%= stylesheet_pack_tag 'application' %>
If you are running your app on Heroku you'll have to adjust some settings to make it work with Webpacker and Tailwind.
First of, with later versions of Webpacker you'll have to add the Node buildpack and then the ruby one.
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add heroku/ruby
Then you'll have to update the config var
That's it, folks. You can now use Tailwind CSS classes in your markup.
You can find a reference app at https://github.com/artmann/rails-tailwind-example