https://perko.dev/assets/2017-11-17-tailwindcss-my-grumpy-views-CbsX3vLU.js

1const e=`---
2date: 2017-11-17
3slug: 2017-11-17-tailwindcss-my-grumpy-views
4title: "TailwindCSS - My Grumpy Views"
5image: tailwind-twitter-card.jpg
6categories: Front-End Development
7tags: css,review,tailwind
8---
9
10<p>A few months ago, I remember <a href="https://twitter.com/adamwathan">Adam Wathan</a> tweeting about a CSS framework he was building, titled <a href="https://tailwindcss.com">Tailwind</a> (it came from building his KiteTail app).  I turned thirty this year, and that seems to have made me a grumpy old developer.  I used to see something new and want to be the first one using it, on the bleeding edge of technology.  Five years ago I would have been so excited to see this.  Why was I grumpy?  Utility-first CSS was why!</p><p>Utility-first CSS seemed to me like nothing better than writing inline styles.  We, as an industry, moved away from writing inline styles and started using style-sheets for many reasons.  Separations of concerns was one, and also the ability to refactor your code.  I saw some examples of Tailwind online, and was disgusted to see code like this:</p><pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>w-24 rounded rounded-full border-4 border-white absolute pin-l pin-b -mb-8 ml-4<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
11</code></pre><p>Can you imagine if you wanted to have a bunch of images look the same, re-using the same massive group of classes?  Think of what would happen if management or your client came to you and said &quot;Hey, let&#39;s make all the images not have that white border&quot;.  Now you will have to search through your files and find all of those classes scattered among your HTML (or JavaScript if you are using templates in a framework such as React, Vue, etc).</p><h3 id="the-good-parts">The Good Parts</h3>
12<p>Tailwind does allow you to make extremely quick mock-ups and proof of concepts.  I finally gave in to my grumpiness and read through the docs, and started playing with the code on <a href="https://codepen.io/ChrisPerko/">CodePen</a>.  The first thing I did was a recreation of a Twitter profile card, which actually landed on the front-page of Codepen.  <a href="https://codepen.io/ChrisPerko/pen/XzMRQJ?editors=1000">You can view the pen and the source code here</a>.</p><p><img src="/images/tailwind-twitter-card.jpg" alt="A twitter card I built with Tailwind"></p><p>I also started playing with making my own set of alert boxes.  First, I started by recreating a couple of the examples from the Tailwind docs, then made some modifications to design my own.  <a href="https://codepen.io/ChrisPerko/pen/YEVvWz">(Again, you can view the code on Codepen</a>.</p><p><img src="/images/tailwind-alert-boxes.png" alt="Alert boxes built with Tailwind"></p><h3 id="im-not-so-grumpy-anymore">I&#39;m Not So Grumpy Anymore</h3>
13<p>The ability to make these components is super simple with Tailwind.  But what about a real application?  I&#39;m not talking about a TODO app or something you just bang out one afternoon; I&#39;m talking a large application.  How do we manage all of these classes, and how do we manage large design changes on a project?  Here is the answer that changed my opinion of Tailwind: it is <a href="https://tailwindcss.com/docs/what-is-tailwind/#component-friendly">component-friendly</a>!  This means that you can actually take those globs of classes that you want to use for every image, or button, or notification box, and create a component out of them.  This single feature is what really made me see the light.  You still get the ability to make awesome design components extremely quickly, and you can put those ideas to use into components that you can use throughout your project!</p><p>I am too far into KickoffWP.com to be willing to refactor everything to use Tailwind, but I do plan to utilize the framework in my next project.</p>`;export{e as default};