Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/IcaliaLabs/tailwindcss-rails
A gem to install Tailwind CSS - https://tailwindcss.com/
https://github.com/IcaliaLabs/tailwindcss-rails
Last synced: about 1 month ago
JSON representation
A gem to install Tailwind CSS - https://tailwindcss.com/
- Host: GitHub
- URL: https://github.com/IcaliaLabs/tailwindcss-rails
- Owner: IcaliaLabs
- License: mit
- Created: 2018-07-02T20:25:17.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-14T03:55:17.000Z (almost 2 years ago)
- Last Synced: 2024-04-25T04:45:01.756Z (7 months ago)
- Language: Ruby
- Size: 34.2 KB
- Stars: 90
- Watchers: 8
- Forks: 15
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Tailwind CSS Rails
The `tailwindcss` gem helps you to easily install the Tailwind CSS framework by using WebPack and the `webpacker` gem.
## Table of contents
- [Installing the gem](#installing-the-gem)
- [Contributing](#contributing)
- [License](#license)
- [Code of conduct](code-of-conduct)
## Installing the gem
In order to run the install generator from `tailwindcss` you need to add the [webpacker](https://github.com/rails/webpacker) gem, and run the installation setup for it.
#### Installing webpacker + tailwindcss
tailwindcss-rails ~> 1.0.0 supports Rails ~>5.2.0 and tailwindcss ~> 1.0
You first need to add the following gems to your `Gemfile`:
```
# Gemfile
gem 'webpacker', '~> 4.0.0'
gem 'tailwindcss', '~> 1.0.0'
```
Run the following:
```shell
bundle
bundle exec rails webpacker:install
bundle exec rails g tailwindcss:install
```
This will prepare the application to use tailwind by:
1. Adding tailwind by using `yarn`
2. Create a `javascript/css` directory
3. Init tailwind from the `node_modules`
4. Setup tailwind
5. Configure `postcss.config.js` file
If you want to know how this is achieved, you can go [here](https://github.com/IcaliaLabs/tailwindcss-rails/blob/master/lib/generators/tailwindcss/install_generator.rb).
These two lines will compile the assets from the `app/javascript/css` folder.
You must add the following to your `config/initializers/content_security_policy.rb`:
```ruby
Rails.application.config.content_security_policy do |policy|
policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035' if Rails.env.development?
end
```
Inside of `config/webpacker.yml`, you must set `extract_css: true` default is `false`.
You have to add these two lines to your `application` layout in order to compile it.
```ruby
<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application' %>
```
Webpacker will automatically compile your assets while a `bundle exec rails s` is active.
## Contributing
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](http://contributor-covenant.org) code of conduct.
## License
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
## 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](https://github.com/[USERNAME]/tailwindcss/blob/master/CODE_OF_CONDUCT.md).