Ask A Question

Notifications

You’re not receiving notifications from this thread.

How to install TailwindCSS 1.0 with Rails 6 Discussion

Hey Chirs!

Great video, only question I have about using tailwind with rails 6 is the theme config.

in the docs it says to place:

module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

within tailwind.config.js however when i make this file it dosn't load and if i try to add it to the postcss coinfig it crashes and wont compile.. any solutions or suggestions?

Reply

ok so I am a complete idiot..

all i had to do was run the following in my terminal

./node_modules/.bin/tailwind init path/to/app/tailwind.config.js

Reply
Reply

I don't know if things have changed since this video was posted, but when editing postcss.config.js, you will want to have require('postcss-import') come before require('tailwindcss').

If you don't, tailwind will process the empty-ish file doing nothing (no @tailwind directives), and then the postcss import will pull in the tailwind imports.

Doing the import first means the @tailwind directives will be present when the tailwind processor runs.

Reply

Anyone know if this is correct? Chris just went with pasting the requires above the require('postcss-import') which seems to make sense.

Reply

require('postcss-import') should be at the top of postcss.config.js, it won't break @import 'file.css'; if using CSS instead of SCSS.

Reply

This may have been true at one time, but having them in Chris' order is fine:
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-import'),
...

Reply

Would it be sensible to use tailwindcss together with bootstrap, or is it really meant to replace bootstrap?

Reply

This is definitely an alternative to something like Bootstrap. They're both full CSS frameworks albeit with different philosophies.

Reply

Was app/javascript/stylesheets/ used because app/javascript/src/ was not yet the default?

Reply

I am having a problem with tailwind and it seems it also occur here in the tutorial, whn I added tailwing because it is compiled with javascript, my styling does not apply on load until my javascript are loaded. is there any fix for this?

Reply

To get this working on an existing app running Rails 6, I had to:

1) Create a tailwind.config.js file using yarn tailwindcss init and move it from the root to app/javascript/stylesheets
The official TailwindCSS documentation says this file is optional, but I couldn't get any default browser styles to change until I did this.
If you want the full TailwindCSS default theme, use yarn tailwindcss init --full. You can strip unused extras out on your production server with Purge-CSS later if you want.

2) Reinstall Webpacker. When I ran bin/webpack I got this error: "bin/webpack: No such file or directory".
bundle exec rake webpacker:install fixed it.

Config: Ruby 2.6.5 + Rails 6.0.3 + TailwindCSS 1.4.6

Reply

Actually, after further testing I'm certain reinstalling Webpacker fixed it. (The config file had nothing to do with getting TailwindCSS working.)

Reply

Does anybody knows how to fix this error in Rails 6.0.3 and TailwindCSS 2.0?

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (/Users/alex/Workspace/virtualfood/node_modules/postcss/lib/processor.js:153:15)
at new Processor (/Users/alex/Workspace/virtualfood/node_modules/postcss/lib/processor.js:56:25)
at postcss (/Users/alex/Workspace/virtualfood/node_modules/postcss/lib/postcss.js:55:10)
at /Users/alex/Workspace/virtualfood/node_modules/postcss-loader/src/index.js:140:12
@ ./app/javascript/stylesheets/application.scss 2:26-228
@ ./app/javascript/packs/application.js

Reply

Hi I have same error , did you find a solution?
Thanks

Reply

Yes, I created this template for the solution https://railsbytes.com/templates/XbBsG6

I hope it help you too!

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 86,563+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.