DEV Community

Akshay Khot
Akshay Khot

Posted on • Edited on

4 1

Tailwind + Browsersync Sandbox

If you are tired of changing a Tailwind class, doing alt + tab, and reloading the whole app to see the change your made, check out my Tailwind + Browsersync project template.

Treat this as your local sandbox to quickly build React or Turbo Frame (if using Hotwire) component UI with Tailwind. The browser reloads automatically after you make a change and save. Just like Tailwind playground.

Once you're satisfied with a design, copy + paste it in your main project. I found this workflow very productive, compared to making a small change, and reloading my big rails app. Hope you do, too.

Tailwind + Browsersync

What about Tailwind playground? it is great, but I do like to work in my favorite IDE with my favorite fonts and themes.


Installation

git clone https://github.com/akshayKhot/design.git your_project_name
cd your_project_name
yarn # or npm install
Enter fullscreen mode Exit fullscreen mode

Usage

Run these commands in separate terminal tabs.

yarn tailwind
yarn server
Enter fullscreen mode Exit fullscreen mode

If you're using npm, run these commands instead. However, I prefer and recommend using yarn, it's very fast compared to npm.

npm run tailwind
npm run server
Enter fullscreen mode Exit fullscreen mode

Here's a quick demo using the above set up, where I build Github's navbar.


Originally published on my blog at https://akshaykhot.com/tailwind-with-browsersync/

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay