All threads / How to install TailwindCSS 1.0 with Rails 6 Discussion

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?

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

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.

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

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.

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?

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

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

Reply
Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.