DEV Community

Victor Vincent Taglia
Victor Vincent Taglia

Posted on

Element prototyping workflow with Tailwind CSS for a Rails + Stimulus app

In my latest project I am using a combination of Rails, Stimulus JS, and Tailwind CSS. After some initial effort, I decided I would rather not do all of the new element prototyping in my Rails development environment.

Instead, I created a separate environment for rapid HTML / TailwindCSS / Stimulus JS prototyping.

Some of the main features of this environment include:

  • Live-reloading for Tailwind.css changes, as well as both HTML and JS changes.
  • Focus on the design and Javascript UX before focusing on merging that with Ruby code.
  • Keep design and development workflows more separated.

So far, I have just used this environment to create interactive elements that I then easily port over to my Rails project, simply by copying the HTML partial, Stimulus controller(s), and my new @apply's to my Rails project. I am planning on using it to build out whole pages using multiple partials, but I just set this up today and have yet to see how effective it is for such a task.

Try out the environment if you are itching for a new workflow for your Rails/Stimulus/Tailwind projects!

https://github.com/vincenttaglia/RST-Element-Prototype

Top comments (2)

Collapse
 
vincenttaglia profile image
Victor Vincent Taglia •

You will have to manually install the following webpack plugin to have easily working templates with nested partials until my pull requests are accepted. Use the default branch 'rst-env'.

github.com/vincenttaglia/html-webp...