Add tailwindcss to Rails 6 code example

Example: tailwind 2 on rails 6

Step 1 # Tailwind 2 For rails 6. (currently working 2021/03/13)

Step 2 # Create a new rails app

Step 3 # Run the following: yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Step 4 # Go to 'app/javascript' and create a folder (I called mine "stylesheets").

Step 5 # Then once you are in 'app/javascript/stylesheets' create a file called 'application.css' or 'application.scss' anyone should work.

Step 6 # Go into the 'application.scss' or 'application.css' file and add the following:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Step 7 # you can then run: npx tailwindcss init
(the above line generates the tailwind.config.js file which you should move into your 'app/javascript/stylesheets'.)

Step 8 # go to the postcss.config.js file and add this to your plugins: require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),

Step 9 # go to 'app/javascript/packs/application.js' and add this:  require("stylesheets/application")

Finally step 10. Go to your application layout and add this under your javascript_pack_tag. : <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>



This is more of a personal note. but if this helped you please up vote this grepper post and i'll set up a discord dedicated to helping each other improve in Ruby on rails.