Image for post
Image for post

Update 2— Dec 3, 2017

After a bit of exploration, it looks like babel-plugin-tailwind does indeed work with Vue! The problem stemmed from how Glamor injects styles. Emotion and CSX seem to work fine!

Obviously this isn’t the native <style></style> syntax that comes with Vue, but it’s an option if you want to pull in Tailwind in via CSS-in-JS.

Template:

JSX:

Update — Dec 1, 2017

In my post, I mentioned babel-plugin-tailwind doesn’t work with Emotion or Styled Components yet. However, it looks like Emotion has the ability to use JavaScript objects and works fine with the plugin.

I’ve added an example of how to do this in the repo using react-emotion. …


Image for post
Image for post

Update 2! — Nov 19, 2017

Good news! After some digging around, I found another library called PurgeCSS that is more flexible and frequently maintained than PurifyCSS. It allows for custom “Extractors” which lets us write some regex to work with Tailwind CSS classes. A shout to the author who made some quick fixes to make this work with Tailwind CSS style syntax.

Laravel Mix Example: https://gist.github.com/andrewdelprete/277a5a2af33aea2481c54a6a8b35d6c3

Webpack Example:
https://gist.github.com/andrewdelprete/d2f44d0c7f120aae1b8bd87cbf0e3bc8

Update! — Nov 18, 2017

PurifyCSS has an issue where classes containing numbers appended to the end and special characters like : are not cleaned up / purified.

In my original post, I only used the handful of classes found in the Tailwind webpack-starter index.html file. There was a huge reduction in CSS size but once you utilize more classes in your HTML that figure quickly diminishes. …


I’m excited to announce that my Async / Await video series is nearing completion and will launch October 23! I’m very happy on how it’s turning out and I think there is something for everybody in there.

I’ve learned a ton about Promises while also advancing my understanding of recording great screencasts. I took the feedback from many of you and applied it to my latest series on Async / Await. My hope as always is that you’ll come away with something you can utilize immediately.

There are a few misconceptions about Async / Await in that some believe it replaces Promises altogether. Async / Await actually uses Promises under the hood and you should have a fundamental understanding of Promises before jumping into Async / Await head first. …

About

Andrew Del Prete

God. Family. Code.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store