Skip to main content

How to install TailwindCSS 1.0 with Rails 6 Discussion

General • Asked by Chris Oliver

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

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.

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.

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

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?

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 27,623+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.