{"id":26514553,"url":"https://github.com/themesberg/tailwind-rails-starter","last_synced_at":"2026-04-11T03:04:15.254Z","repository":{"id":283081884,"uuid":"950478050","full_name":"themesberg/tailwind-rails-starter","owner":"themesberg","description":"A free and open-source starter project to help you get started with the core Flowbite Library components and Ruby on Rails","archived":false,"fork":false,"pushed_at":"2025-03-18T13:27:12.000Z","size":1,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-18T13:46:36.588Z","etag":null,"topics":["flowbite","rails","ruby","ruby-on-rails","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://flowbite.com/docs/getting-started/rails/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themesberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-18T08:19:18.000Z","updated_at":"2025-03-18T13:27:16.000Z","dependencies_parsed_at":"2025-03-18T13:46:38.673Z","dependency_job_id":"6a8e6d02-e7e7-43d1-9276-3e44b4319a29","html_url":"https://github.com/themesberg/tailwind-rails-starter","commit_stats":null,"previous_names":["themesberg/tailwind-rails-starter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-rails-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-rails-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-rails-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-rails-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themesberg","download_url":"https://codeload.github.com/themesberg/tailwind-rails-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244739946,"owners_count":20501992,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flowbite","rails","ruby","ruby-on-rails","tailwind","tailwindcss"],"created_at":"2025-03-21T05:18:27.420Z","updated_at":"2025-12-30T20:54:06.282Z","avatar_url":"https://github.com/themesberg.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[In this guide](https://flowbite.com/docs/getting-started/rails/), you will learn how to set up Ruby on Rails with Tailwind CSS and install Flowbite to start using the UI components built with the utility classes from Tailwind CSS.\n\n## Create a new project\n\nFollow the next steps to get started with a Ruby on Rails project and install Tailwind CSS and Flowbite. \n\nMake sure that you have [Node.js](https://nodejs.org/en/) and [Ruby](https://www.ruby-lang.org/en/documentation/installation/) installed on your machine before continuing.\n\n1. Run the following command to install the `rails` gem from Ruby:\n\n```bash\ngem install rails\n```\n\n2. Create a new Ruby on Rails application if you don't already have one:\n\n```bash\nrails new flowbite-app\ncd flowbite-app\n```\n\nNow that you have created a new project you can proceed by setting up Tailwind CSS.\n\n## Install Tailwind CSS\n\nSince Tailwind v4, it's really easy to install Tailwind CSS with Rails, because we no longer need to have a custom `tailwind.config.js` file. Instead, everything is configured in your main CSS file.\n\n1. Install the official `tailwindcss-rails` gems:\n\n```bash\n./bin/bundle add tailwindcss-ruby\n./bin/bundle add tailwindcss-rails\n```\n\n2. Run the install command to set up the Tailwind configuration files:\n\n```bash\n./bin/rails tailwindcss:install\n```\n\nNow that Tailwind CSS has been successfully installed you can proceed by installing Flowbite.\n\n## Install Flowbite\n\n1. Install Flowbite by running the following command in your terminal:\n\n```bash\nnpm install flowbite --save\n```\n\n2. Import the default theme variables from Flowbite inside your main `application.css` CSS file:\n\n```css\n@import \"flowbite/src/themes/default\";\n```\n\n3. Import the Flowbite plugin file in your CSS:\n\n```css\n@plugin \"flowbite/plugin\";\n```\n\n4. Configure the source files of Flowbite in your CSS:\n\n```css\n@source \"../../../node_modules/flowbite\";\n```\n\n### Turbo load support\n\nFlowbite provides custom event listeners for turbo load support if you import the `flowbite.turbo.js` file. Check out the following guides to learn more how to integrate the JavasScript file that powers the interactive components with Importmap or ESBuild.\n\n### Importmap\n\nImportmap is the default way of handling JavaScript on Rails 7. In order to support turbo load from importmaps you have to pin the `flowbite.turbo.js` file from a CDN where the `turbo:load` event listeners are added instead of `load`.\n\n1. Add the following line inside your `importmap.rb` file:\n\n```bash\npin \"flowbite\", to: \"https://cdn.jsdelivr.net/npm/flowbite@{{\u003c current_version \u003e}}/dist/flowbite.turbo.min.js\"\n```\n\n2. Then you need to import `flowbite` inside your `application.js` file:\n\n```javascript\nimport 'flowbite';\n```\n\nThis will enable the interactive elements like dropdowns, modals, and navbars work by hooking the event listeners and actions to the data attributes whenever a new page is loaded in your application.\n\n### ESBuild\n\nIf you use ESBuild to Bundle your JavaScript on Rails, you will need to import a version of Flowbite which supports the `turbo:load` event listeners instead of `load`. To do this **add the line below** to your `application.js` file:\n\n```javascript\nimport \"flowbite/dist/flowbite.turbo.js\";\n```\n\n### Standard JS (no turbo)\n\nIf you decide not to use turbo load then you can follow these steps:\n\n1. Run this command to pin Flowbite in your `importmap.rb` file:\n\n```bash\n./bin/importmap pin flowbite\n```\n\n2. Then you need to include Flowbite inside your `application.js` file:\n\n```javascript\nimport 'flowbite';\n```\n\n### Include via CDN\n\nAlternatively to all of the above you can also include the JavaScript via CDN:\n\n```html\n// include via CDN for turbo support\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/flowbite@{{\u003c current_version \u003e}}/dist/flowbite.turbo.min.js\"\u003e\u003c/script\u003e\n\n// include via CDN without turbo support\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/flowbite@{{\u003c current_version \u003e}}/dist/flowbite.min.js\"\u003e\u003c/script\u003e\n```\n\n### Datepicker\n\nSince the release of version `2.4.0` of Flowbite the Datepicker component is now part of the main package so you don't need to include `datepicker.turbo.js` separately. It will work out of the box.\n\n### Versions prior to 2.4.0\n\nIn order to support turbo load from Ruby on Rails 7, you have to include the `datepicker.turbo.js` file either from NPM or CDN into your project.\n\nInclude the following JavaScript file to support the datepicker component:\n\n```bash\npin \"flowbite-datepicker\", to: \"https://cdn.jsdelivr.net/npm/flowbite@2.3.0/dist/datepicker.turbo.min.js\"\n```\n\nDon't forget to also import it inside your `application.js` file:\n\n```javascript\nimport 'flowbite-datepicker';\nimport 'flowbite/dist/datepicker.turbo.js';\n```\n\n## Building your project\n\nRun the following command to start a local server and build the source files:\n\n```bash\n./bin/dev\n```\n\nThis will create a local server and you will be able to access the pages on `localhost:3000`.\n\nYou can also run `rails tailwindcss:build` to compile Tailwind CSS.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Ftailwind-rails-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemesberg%2Ftailwind-rails-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Ftailwind-rails-starter/lists"}