DEV Community

loading...

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

vincenttaglia profile image Victor Vincent Taglia ・1 min read

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

Discussion (2)

pic
Editor guide
Collapse
vincenttaglia profile image
Victor Vincent Taglia Author

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...

Collapse
Sloan, the sloth mascot
Comment deleted