🎨 Adding Tailwind CSS

📘 1. Install Tailwind CSS

yarn add tailwindcss@^3.4.1

🧷 2. Update package.json Resolutions

{
 // keep previous keys as it was
  "resolutions": {
    "strip-ansi": "^6.0.1",
    "string-width": "^4.2.2"
  }
}

🗂️ 3. Create Stylesheet Directory

mkdir -p ./app/javascript/stylesheets/

⚙️ 4. Init Tailwind Config

npx tailwindcss init -p

Replace content in tailwind.config.js:

module.exports = {
  important: true,
  content: ["./app/javascript/**/*.{js,jsx}", "./app/views/**/*.html.erb"],
};

💅 5. Add Tailwind Base Styles

touch ./app/javascript/stylesheets/application.scss

Append to application.scss:

@tailwind base;
@tailwind components;
@tailwind utilities;

OR run the command:

touch ./app/javascript/stylesheets/application.scss # creates the file
cat <<EOT >> ./app/javascript/stylesheets/application.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
EOT

📥 6. Import Tailwind in application.js

Manually append:

import "../stylesheets/application.scss"