DEV Community

Tailwind + Vue Formulate = ❤️

Justin Schroeder on June 18, 2020

Using Tailwind with Vue Formulate Watching Vue Formulate begin to gain traction in the Vue ecosystem in the last few months has been a r...

Read full post

Madza • Jun 18 '20

And I thought it was just Svelte that worked awesome in pair with Tailwind xdd
Thank you so much for this ;)

Csaba Kissi • Jun 18 '20

This is absolutely amazing man! Even the form generation is supported. My VUE forms were bloated and hard to read. This is absolutely the game changer for me

Justin Schroeder • Jun 19 '20

Thanks! I'm biased but I agree, I think the component-first api + form generation is a game changer. Excited to see what you build with it 👍

Csaba Kissi • Jun 19 '20 • Edited

The recent things I did do not use forms like e.g. tablericons.com but I'm going to create an invoice generator and this will definitely suite my needs. I'll also use it in the admin area of my upcoming SaaS projects.

Andrew Boyd • Jun 19 '20

Wow! love the UI for the tablericons.com site. I'm going to be inspired heavily by it for some eventual Vue Formulate work. Have aspirations to create a theme customizer (for those who don't use class utility frameworks).

Csaba Kissi • Jun 19 '20

Thanks Andrew!

Atharva Sharma • Jul 12 '20 • Edited

If anyone is wondering where styling of forms went when they deployed their app in production, please make sure that in your purgeCSS config, you have set the matching for *.js files as well.
Like this:

purge: {
    ....
    content: ['./src/**/*.html', './src/**/*.vue', './src/**/*.js']
    ...
},

Ross Coundon • Jun 19 '20

What is this witchcraft!? Really like the look of this, thanks for pointers over on Discord too

Anton Reindl • Aug 5 '20

Works really well! Thank you.

One Question: How would I style a disabled Button with Tailwind? I don't see that attribute in the classes docs :/

Thanks for help and great job. The framework is simply amazing.

Justin Schroeder • Sep 27 '20

As of 2.4.4 released this week this is easy! The context object passed to you class functions now includes an attrs property which is all of the element’s attributes including disabled