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

vi postcss.config.js
# add line

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 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:. Use prefix hover: to apply a utility on hover