How to install TailwindCSS 1.0 with Rails 6 Discussion

Discussion for How to install TailwindCSS 1.0 with Rails 6

Shawn Wilson May 3, 2019 6:02am

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?

Shawn Wilson May 3, 2019 6:06am

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

Tabish Iqbal November 5, 2019 6:57am

https://tailwindcss.com/docs/installation#3-create-your-tailwind-config-file-optional

npx tailwind init
or
yarn tailwind init

Jonathan Bennett June 1, 2019 6:04am

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.

Bob Walsh February 7, 2020 6:47pm

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

Dmitrii Amelchenko February 29, 2020 7:37pm

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.

Nate Roise May 12, 2020 10:35pm

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

Roman Gaufman June 26, 2019 5:46pm

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

Dan Charlesworth July 11, 2019 5:23am

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

Mark Radford September 4, 2019 5:32am

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

Daniel Shotonwa September 25, 2019 10:24am

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?

Nate Roise May 10, 2020 6:00am

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

Nate Roise May 12, 2020 9:55pm

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

Alex Ventura November 23, 2020 2:40am

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