DEV Community

Use Tailwind CSS 1.1 in your Rails App

Andrew Mason on April 07, 2019

NOTICE This tutorial is out of date and may not work for you. I have written a new post based on my experience using Rails and TailwindC...

Read full post

Ahmad Ya'kob Ubaidullah • Aug 9 '19

@andew does your @apply feature working on this setup?

Alvin Crespo • Jan 25 '20

Doesn't work for me. Trying with this:

@tailwind base;
@tailwind components;

.field {
  @apply flex flex-col mb-4;
}

@tailwind utilities;

Andrew Mason • Jan 25 '20

It was working. Might be time to update this post. I used it today but did something slightly different bc of scss

Andrew Mason • Jan 26 '20

I created a new post that should work. Check it out here: dev.to/andrewmcodes/ruby-on-rails-...

Will Johnson • May 16 '20

Is this the way it should be done for Rails versions before 6?

Mohammad Dahab • Jul 11 '19

I don't think you should put stylesheets.css inside /packs folder, It will be considered a "pack" and will be compiled to stylesheets-[hash].js.

Andrew Mason • Jul 15 '19

Can you elaborate, please? I do this bc it’s the “rails way” a typically only find pain when I stray from this path. What do you prefer to do?

Mohammad Dahab • Jul 15 '19 • Edited

/packs Is a special folder that contains the entry points to your "modules" (webpacker will bundle up each file inside /packs with its dependencies into single file).

So, If you have packs/application.js it will be bundled up with its dependencies and become available as example.com/packs/js/application-[hash].js (Find that in the <head> of your website).

If you check your deployment, you will find example.com/packs/stylesheets-[hash].css which is basically useless because your styles are already bundled to example.com/packs/css/application-[hash].css because of the import './stylesheets.css' you have in app/javascript/packs/application.js already.

Having stylesheets.css inside packs might be just "useless" now. But, It might pile up with time or you might even have your React src folder inside there which basically mean you will have webpacker compiling your app in a loop that might cause 40+ minutes when deploying (I learned the hard way 😅).

Juan Manuel Guzman Nava • Jul 17 '19

Great!

Ark Shraier • Apr 15 '19

Hi, what is your personal experience with Tailwind? What are the key differences from the others

Andrew Mason • Apr 17 '19

Could you describe what you mean by “others”?

Tailwind is not a framework like bootstrap or materialize. It’s a utility framework and best suited for someone who is very comfortable with css, whereas css frameworks provide prebuilt components to get you up and running quickly (in my opinion of course). I love css and tailwind gives me total control + the ability to pull out components like cards. I can move fast, it’s easy to experiment and then pull out reusable components, and it can help you get better at css!