Tailwind CSS Rails
tailwindcss gem helps you to easily install the Tailwind CSS framework by using WebPack and the
Table of contents
Installing the gem
In order to run the install generator from
tailwindcss you need to add the webpacker gem, and run the installation setup for it.
You first need to add this to you
# Gemfile gem 'webpacker', '~> 3.5' # OR if you prefer to use master gem 'webpacker', git: 'https://github.com/rails/webpacker.git' yarn add https://github.com/rails/webpacker.git # OR to try out 4.x pre-release gem 'webpacker', '>= 4.0.x' yarn add @firstname.lastname@example.org
Finally, run following to install Webpacker:
bundle bundle exec rails webpacker:install # OR (on rails version < 5.0) bundle exec rake webpacker:install
You are now ready to add the tailwindcss gem
Installing Tailwind CSS
You need to include the
tailwindcss gem inside your
gem 'tailwindcss', '~> 0.2.0'
or you can install the latest build:
gem 'tailwindcss', git: 'https://github.com/IcaliaLabs/tailwindcss-rails.git'
Install the gem by running the bundle command:
After running the
bundle command, you can now run the installer.
$ rails g tailwindcss:install
This will prepare the application to use tailwind by:
- Adding tailwind by using
- Create a
- Init tailwind from the
- Setup tailwind
If you want to know how this is achieve, you can go here.
Lastly but not least, you have to add this two lines to your
application layout in order to compile it.
This two lines will compile the assets from the
Don't forget to run the
webpacker server like so:
This will lift a node server that will watch the changes on files and compile them.
Bug reports and pull requests are welcome on GitHub at https://github.com/IcaliaLabs/tailwindcss-rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
The gem is available as open source under the terms of the MIT License.
Code of Conduct
Everyone interacting in the Tailwindcss project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.