rails/tailwindcss-rails

Missing documentation about tailwind.config.js customization

rubenjimenez opened this issue · 5 comments

rubenjimenez commented

I was trying to customize Tailwind CSS via tailwind.config.js and looking for the proper way to do it I saw you wrote this:

When used with Webpacker, Tailwind CSS is installed as a postCSS processor. Refer to the TailwindCSS documentation to customize your tailwind.config.js file.

I followed all the steps in the Tailwind CSS documentation but I didn't get it to work so I made a little research and I found there're some additional steps to accomplish before it works with Rails.

Once you've installed the gem:

  • npx tailwindcss init
  • Move the recently created tailwind.config.js file somewhere inside your ./app/javascript folder in order the file to be packed for Rails (important).
  • Modify postcss.config.js to tell Webpacker where is the new file located: require('tailwindcss')('./app/javascript/tailwind.config.js'),
  • If you've copied the tailwind.config.js file from this repo, important to add the packages @tailwindcss/forms, @tailwindcss/aspect-ratio, @tailwindcss/typography to package.json and install.
  • Enjoy 🎉

The main problem I found was that Tailwind CSS documentation explains that the tailwind.config.js file is going to be searched (firstly) in the root of the project and currently in Rails this is definitely not going to happen.

I think this could be confusing and frustrating for people so maybe documentation should cover it as I guess customizing your Tailwind CSS boilerplate may be very common.

PabloC commented

Thank you for this. I was looking exactly this.

  • 👍2
jumph4x commented

Helpful!

dhh commented

Feel free to turn this into a PR that performs those steps 👍

  • 👍1
turgs commented

Thank for this. I'm curious about doing this with the Asset Pipeline, as I'm trying to avoid Webpack 🙏 I'd like to add a tailwind.config.js so I can force tailwind to prefix all classes with tw- so I can migrate bit-by-bit off other CSS frameworks without having them conflict.

  • 👀1
ferrisoxide commented

A possible addendum to this, though I'll preface and say I'm a bit clueless when it comes to webpacker, JS, et al.

I tried npx tailwindcss init but it kept throwing back the error Cannot find module 'autoprefixer' and wouldn't build the tailwind.config.js config file. Running npx tailwindcss-cli@latest init (per the Tailwind docs) did work though.

Yeah, ignore all that. I had an old version of node (~10.x) that was causing issues.