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.