Example app on how to get things running in Rails

[jvanbaarsen]

I'm not much of a JS hero, so all the build tools: Webpack, Postcss etc feel like one big magic show to me. Is there anyone around here that has more experience with these tools that could create an example app with the bare configuration that is required for Ruby on Rails?

In return I'll make sure that the steps to set it up are added to the docs :-)

[adrianspacely]

Laravel Mix makes webpack a no-brainer. It is not coupled to PHP or Laravel at all, you can use it in any project.

Repo: https://github.com/JeffreyWay/laravel-mix

Installation: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/installation.md

The only exception to it not being coupled to Laravel this is the versioned paths found in mix-manifest.json. Laravel provides a helper, {{ mix('/css/app.css') }}, to resolve /css/app.css to /css/app.css?id=1234567890.

You may need to write your own helper function to do a lookup in the mix mix-manifest.json. This is Laravel's implementation: https://github.com/laravel/framework/blob/5.5/src/Illuminate/Foundation/helpers.php#L537

[jasoncharnes]

@jvanbaarsen depending on which version of Rails (4.2+) you're using, the Webpacker gem makes this pretty straightforward.

Please note: I haven't used this in production, and I only fired up a Rails app to start playing with Tailwind. Also, I'm also not much of a JS hero either. 😎

This is a very basic process I followed and was able to get up and running pretty quick. Someone may have a more efficient way to do this. If I had more time today, I'd work on making this part of the Webpack build process.

1. Add Webpacker to your Gemfile.

gem 'webpacker', '~> 3.0'

2. Install the Gem

bundle install

3. Install (and configure) Webpacker

bundle exec rake webpacker:install

Webpacker will add the required files for Webpack, as well as create the app/javascript directory.

4. Create a tailwind.js file. I used:

(edit) ALSO NEED TO INSTALL TAILWIND: yarn add tailwindcss --dev 🤦‍♂️

./node_modules/.bin/tailwind init tailwind.js

5. Create a file inside app/javascript/src named styles.css

app/javascript/src/styles.css

Paste in the contents of this file.

6. In app/views/layouts/application.html.erb' add this in the` (or wherever you want)

<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>

7. Now, hop back in a terminal and run:

./node_modules/.bin/tailwind build app/javascript/src/styles.css -o app/javascript/src/application.css

This builds the CSS for the application.

8. Inside app/javascript/packs/application.js add:

import "src/application.css"

9. Fire up your servers:

In one terminal window: ./bin/webpack-dev-server' In another:rails s`

10. Bask in Webpacker + Tailwind CSS 😎

I hope this helps. As I mentioned, this is just my first attempt at it. I'm glad to share with you (and hope you'll share with me!) as I experiment more with Rails + Tailwind.

[jvanbaarsen]

@jasoncharnes Thanks! Yeah I have been trying to do this with Webpacker, but I wasn't sure where to place the code that is in the docs for Webpack (The tailwind docs that is).

I tried placing that in a new file called: postcss.config.js but nothing happend 🙈 .

I'll give this a shot and see if I can get it deployed to Heroku!

[jvanbaarsen]

@jasoncharnes Great, I got this working locally. Only thing that I had to change was the following:

"yarn add tailwindcss --dev" -> When I ran that command the tailwindcss was not added to package.json. So I manually added it to that file to the dependency group, and ran: yarn install.

It does seem that the config js (The one in the root tailwind.js) is not picked up. I'm looking into ways of getting this to work :)

[adamwathan]

Nice glad you guys are figuring this out! Once you feel like you've got it ironed out pretty well, would you mind sharing a simple bare bones Rails repo with everything setup? Would be great for helping out other trying to integrate with Rails 👍

[jvanbaarsen]

@adamwathan Yes! Collaborative learning 💪

[jvanbaarsen]

@jasoncharnes / @adamwathan It looks like I have the full app running now! I'll do another test with a brand new app, after that is working I'll post it as an example app.

[jvanbaarsen]

@jasoncharnes I got it all working. For now I quickly created a Heroku app and an example repo without any readme:

Repo: https://github.com/jvanbaarsen/tailwindcss-rails-example URL: https://tailwind-rails-example.herokuapp.com/

All the configuration has been done in this commit: https://github.com/jvanbaarsen/tailwindcss-rails-example/commit/9e00e2719570bfe06299fcf8499df63f98563c3d

The most import thing is to remove the .postcssrc file, and replace it with the postcss.config.js file.

Tomorrow I'll write some proper documentation with that readme, and if @adamwathan would accept a PR for it a small headline in the official docs on how to set it up and a link to that example repo (Or even better, maybe they can import it under the tailwindcss namespace and collect a bunch of example apps)

[m1guelpf]

@jvanbaarsen Could you add your example to the awesome-tailwind list?

[jvanbaarsen]

@m1guelpf Where do you want me to add it? Under Resources or Open Source?

[m1guelpf]

@jvanbaarsen I'd put it under resources, but creating a quickstart subsection in the resources section would be the best thing.

[jonaskay]

@jvanbaarsen I got Tailwind to work with Rails (5.1.4) and Webpacker gem without replacing the .postcssrc file.

Here is my .postcssrc: https://github.com/jonaskay/tailwind-rails-blog/blob/master/.postcssrc.yml

[jvanbaarsen]

@jonaskay Thanks for sharing :-) Yeah I got that figured out in the end as well! The syntax feels so weird :P

[skywinston]

This is very helpful, and I can't emphasize enough how important it is to build the Tailwind file using: ./node_modules/.bin/tailwind build app/javascript/src/styles.css -o app/javascript/src/application.css.

I find that its easiest to add this to your package.json as a script, so that while working in you development environment, you're beginning with the latest build of your Tailwind config.

See the "scripts" key in my package.json:

{
  "name": "cloudcma",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github.com:wrstudios/cloudcma.git",
  "license": "MIT",
  "dependencies": {
    "@rails/webpacker": "^3.2.0",
    "tailwindcss": "^0.4.0",
    "webpack-dev-server": "^2.9.7"
  },
  "scripts": {
    "dev": "./node_modules/.bin/tailwind build app/javascript/src/styles.css -o app/javascript/src/application.css && ./bin/webpack-dev-server"
  }
}

This way, typing yarn run dev in your terminal will build your Tailwind css file and launch the webpack dev server.

Thanks again for the help in here, it was great!

[jvanbaarsen]

@skywinston For me there is no need to use the build script. With the example app I posted earlier you can run bin/webpack-dev-server and it will start a webpack server (which auto compiles on CSS changes)

[skywinston]

@jvanbaarsen You're absolutely correct. I couldn't get this to work until I ran ./node_modules/.bin/tailwind build app/javascript/src/styles.css -o app/javascript/src/application.css and assumed that webpack was missing the initial build step. But running bin/webpack-dev-server just now and making a change to my tailwind.js config resulted in a new class being generated, so it looks like webpack is watching for these changes. Thanks for clearing that up; I think its safe to disregard my previous comment.

[skywinston]

@jvanbaarsen Do you know if this is watching changes to the application.scss file or style.css file in @jasoncharnes case. This is where you have @tailwind preflight and @tailwind utilities, plus any component class you'll be customizing as you build the app. I have added some changes there, and webpack does not respond to changes made in that file. This file really should be watched as plenty of additions will be made here as the app is being built. Any thoughts on this?

[jvanbaarsen]

@skywinston I believe in his example it is watching the style.css file. But in my example repo (https://github.com/jvanbaarsen/tailwindcss-rails-example) it is watching this file: https://github.com/jvanbaarsen/tailwindcss-rails-example/blob/master/app/javascript/src/application.scss

[jvanbaarsen]

@skywinston I'm in the process of writing a blogpost on step by step setting up Tailwind in your rails post. It should be up beginning next week (I'll post here when it's up 👍 )

[Artmann]

Here's my take on it https://github.com/artmann/rails-tailwind-example

[rymartin767]

@jvanbaarsen Can you update the steps for a successful deploy to heroku? I've had no issues running tailwindcss locally but fail to deploy via heroku or aws.

[joeybeninghove]

@DawgOnKing I'd be happy to help. I'm successfully deploying Rails 5.2/Edge apps using Tailwind to Heroku right now. What version of Rails are you using and are you using Webpacker to manage everything?

[rymartin767]

@joeybeninghove Greatly appreciated! I'm running "locally" on Cloud9 via Rails 5.2 and webpacker gem.

[joeybeninghove]

@DawgOnKing Oh ok, well I'm only working with Heroku at the moment, not Cloud9 or AWS directly. I'll still try to push up a full repo later if I have a chance, but for now, here is a quick Gist showing the relevant files that I've set up to work: https://gist.github.com/joeybeninghove/882ca5a2ea2917ffca087609a7e4c181

This a pretty vanilla set up honestly, as Heroku takes care of automatically running the webpack compile during deployment.

[rymartin767]

@joeybeninghove - Thanks again for your help. At quick glance, my setup is exactly the same as yours. I will create another app and post specific errors I'm getting from heroku during compile (which is where it's failing).

[jvanbaarsen]

@DawgOnKing Did you setup the buildpacks for Heroku?

[rymartin767]

@jvanbaarsen - short answer, no. I attempted to via console but attempts have been unsuccessful. Did you use CLI?

[rymartin767]

Here's a breakdown for getting Tailwind up and running on Cloud9 machines. This isn't the AWS setup although I have that running as well. I just need additional steps for deploying via Heroku and AWS CodeDeploy which I will work on tomorrow.

Thanks again for assistance with deployment!

https://github.com/DawgOnKing/cloud9-tailwindcss

[jvanbaarsen]

@DawgOnKing I believe I set the Buildpacks in the Heroku interface itself. It is very important that the Nodejs buildpack comes before the ruby buildpack. Otherwise it won't work.

[joeybeninghove]

@DawgOnKing @jvanbaarsen That’s true about the buildpacks, but in my recent deployments to Heroku, they just figured that out for me automatically. I didn’t have to do anything special to manually configure the buildpacks. I’m not sure how or what about the Rails apps I’m deploying that makes that the case, but I’m happy it’s working like that for me. :)

_{Sent with GitHawk}

[rymartin767]

@jvanbaarsen I set both of those via the CLI and they are loading in order according. Here's the output of running heroku buildpacks via CLI:

=== stormy-sands-xxxxx Buildpack URLs

1. heroku/nodejs
2. heroku/ruby

When I attempt to push project to Heroku, I'm getting errors/failures during compile. But warnings as well when building dependencies:

-----> Building dependencies remote: [3/4] Linking dependencies... remote: warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697". remote: warning " > webpack-dev-server@2.11.1" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0". remote: warning "webpack-dev-server > webpack-dev-middleware@1.12.2" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0". remote: [4/4] Building fresh packages... remote: Done in 21.69s.

AND FINALLY THE FAILURES DURING COMPILE:

[2] ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./app/javascript/src/application.css 799 bytes [built] [failed] [1 error]

ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./app/javascript/src/application.css remote: Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'

Module build failed: ModuleBuildError: Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'

IN SUMMARY Looks like these issues are being created by autoprefixer which is a devDependency. I'm not sure why it would be installed in production environment as it's my understanding that only dependencies should be.

[rymartin767]

@jvanbaarsen What command are you using to generate tailwind in CLI? Did you manually create and update contents of your postcss.config.js file?

I appear to be down to a single error for deployment:

ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./app/javascript/src/application.css

remote: Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'

[jvanbaarsen]

@DawgOnKing I'm using Webpacker for this. See my example repo: https://github.com/jvanbaarsen/tailwindcss-rails-example

[rymartin767]

Finally solved by setting NODE ENV production variable via CLI. Thanks to all for assistance!

[nerdcave]

Note, the current version of Tailwind (v0.5.1) now requires your CSS file to look like this:

@tailwind preflight;

@tailwind components;  // new!

@tailwind utilities;

If you use the old config, most classes will be missing and you'll likely experience a prolonged spike in blood pressure.

[kurenn]

I manage to put together a gem to easily install tailwindcss with Rails - https://github.com/IcaliaLabs/tailwindcss-rails - please let me know how it goes!

[coopeu]

Thanks @jasoncharnes I was/am often losing tailwind configuration of my Rails 6 website and this fix it. Great! i.e. by CLI bin/webpack

rails webpacker:info
Ruby: ruby 2.6.4p104 (2019-08-28 revision 67798) [x86_64-linux]
Rails: 6.0.0 Webpacker: 4.0.7 Node: v8.16.1 Yarn: 1.19.0 @rails/webpacker: MRCOM@0.1.0 /var/www/html/MRCOM └── @rails/webpacker@4.0.7 Is bin/webpack present?: true Is bin/webpack-dev-server present?: true Is bin/yarn present?: true

Thanks @jasoncharnes again!

[fractaledmind]

@coopeu:

Have you deployed this to production anywhere? I've been trying to get the assets:precompile job to work for over an hour now, and nothing. I've tried everything suggested here, and when RAILS_ENV=development bundle exec rails assets:precompile works fine, but when RAILS_ENV=production, I get an error:

ERROR in ./app/javascript/css/application.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Cannot find module 'tailwindcss'

# ...

---

EDIT

So, I'm not sure if this feels like it happens regularly to anyone else, but 10 minutes after being exasperated enough to post here, I figured it out.

The issue was installing Tailwind as a devDependency. As soon as I moved it into the dependencies section of my package.json, the production precompilation job worked.