Bootstrap Templates & Themes Logo Bootstrap Templates & Themes
Rails Vite Tailwindcss Template screenshot

Rails Vite Tailwindcss Template

Author Avatar Theme by Israeldcastro
Updated: 14 Nov 2025
97 Stars

Create a Ruby on Rails App using VueJS/ReactJS or Clean project with ViteJS, it is good to start a project. You can choose between Tailwind CSS, Bootstrap, or Bulma.

Github

Categories

React Vite Vue Bulma Scss Tailwind Templates & themes

Overview

This is a Rails template that incorporates VueJS and ViteJS as roll-up. It also provides options to choose between CSS frameworks such as Tailwind CSS, Bootstrap, or Bulma. This template is designed to help start a project with Rails 7 + Vite quickly and efficiently.

Features

  • Rails 7 + Vite: Enables fast project setup and smooth workflow.
  • VueJS 3 and ReactJS 18 support: Choose between VueJS or ReactJS for your project.
  • CSS Frameworks: Tailwind CSS, Bootstrap 5, or Bulma are available as default CSS frameworks.
  • Active Storage integration: Active Storage is included by default, but can be removed if not needed.
  • Flag options for customizations: Use flags like --normal, --vue, or --react to start a project without Vue or React, with Vue, or with React respectively.
  • Hotwired + Stimulus support: Add Hotwired + Stimulus to the project by including the --hotwired flag during project creation.

Installation

To install the Rails Tailwind CSS template, follow these steps:

  1. Clone the repository from GitHub.
  2. Ensure that you are inside the project directory before running any commands.
  3. Use the appropriate command based on your desired configuration:
    • Rails 7 + ViteJS + Tailwind CSS: Use the command rails new my_project -m template.rb --skip-webpack-install --skip-javascript.
    • Rails 7 + Vue 3 + ViteJS + Tailwind CSS: Use the command rails new my_project -m template_vue.rb --skip-webpack-install --skip-javascript.
    • Rails 7 + ReactJS 18 + ViteJS + Tailwind CSS: Use the command rails new my_project -m template_react.rb --skip-webpack-install --skip-javascript.

Summary

This Rails template provides an efficient solution for starting a project with Rails 7 + Vite. It offers flexibility to choose between VueJS or ReactJS and select a CSS framework of your choice. The template also includes features like Active Storage integration and support for Hotwired + Stimulus. With easy installation steps, developers can quickly set up their projects and begin development without any hassle.