Install

yarn add tailwindcss
npx tailwindcss init --full
mkdir app/javascript/stylesheet
mv tailwind.config.js app/javascript/stylesheet/

vi postcss.config.js
# add line
   require('tailwindcss')('./app/javascript/stylesheet/tailwind.config.js'),

vi app/javascript/packs/application.js
# add line
import 'stylesheet/application'

vi app/javascript/stylesheet/application.scss

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

Usage

https://tailwindcss.com/docs/responsive-design/ Responsive design uses 4 breakpoints

  • @media (min-width: 640px) small sm
  • @media (min-width: 768px) medium md
  • @media (min-width: 1024px) large lg
  • @media (min-width: 1280px) extra large xl

Use prefix like md: to apply on that screensize. Default is mobile size so do not use prefix sm:.

https://tailwindcss.com/docs/pseudo-class-variants Use prefix hover: to apply a utility on hover

https://tailwindcss.com/docs/display/#flex