What is Tailwind CSS?

Tailwind CSS is a utility-first framework that lets you style elements quickly using pre-built classes, reducing the need for custom CSS.

Why Use Tailwind CSS?

• Utility-First Approach: Provides small, composable utility classes to apply styles directly in HTML.
• Faster Development: Avoids writing custom CSS and speeds up styling.
• Responsive Design: Built-in responsive utilities make handling different screen sizes easier.
• Customizable: Can be configured to match specific design requirements.

Installation & Setup

• Tailwind CSS is included in the Gemfile:

gem "tailwindcss-rails", "~> 4.0"

• Run bundle install to install the gem.
• Install Tailwind CSS in the Rails project by running:

rails tailwindcss:install

This will:

• Generate Tailwind’s configuration files.
• Create app/assets/tailwind/application.css for managing styles.
• Add a Procfile.dev to run the Tailwind watcher alongside the Rails server.
• Update .gitignore to exclude asset builds.
• To ensure Tailwind is watching for changes, run the following command in a new terminal window or tab:

rails tailwindcss:watch

How to Use Tailwind CSS in Views

Once Tailwind is installed, you can start applying utility classes directly in your views.

• Example: Styling a button

  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Save Expense
  </button>
  

Troubleshooting Common Issues

• Issue: Styles not applying

  • Ensure rails tailwindcss:watch is running in a separate terminal window. If styles still aren’t applying:

  • Restart the Tailwind watcher:

    bin/rails tailwindcss:watch
    

  • Refresh the browser.

• Issue: "Command Not Found" Errors

  • If rails tailwindcss:install fails, ensure that tailwindcss-rails is installed by running:

  bundle info tailwindcss-rails
  

• Issue: If rails tailwindcss:watch doesn't update styles, try manually building them:

  rails tailwindcss:build
  

  This generates the final CSS file used for styling.