{"id":4001,"date":"2020-03-03T05:39:00","date_gmt":"2020-03-03T05:39:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=4001"},"modified":"2020-03-10T05:53:35","modified_gmt":"2020-03-10T05:53:35","slug":"tutorial-get-started-with-tailwind-css-in-15-minutes","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/framework\/tutorial-get-started-with-tailwind-css-in-15-minutes\/","title":{"rendered":"Tutorial: Get Started with Tailwind CSS in 15 Minutes"},"content":{"rendered":"\n<h3><strong><a href=\"https:\/\/tailwindcss.com\/\">Tailwind CSS<\/a>\u00a0<\/strong>is a CSS framework that gives you utility classes instead of pre-built components.<\/h3>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe class='youtube-player' width='960' height='540' src='https:\/\/www.youtube.com\/embed\/6zIuAyLZPH0?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent' allowfullscreen='true' style='border:0;' sandbox='allow-scripts allow-same-origin allow-popups allow-presentation'><\/iframe><\/span>\n<\/div><\/figure>\n\n\n\n<h4>One of out favorite things that we&#8217;ve found after using <strong>Tailwind<\/strong>:<\/h4>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>You&#8217;ll never need to override CSS framework classes again.<\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"4002\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/tutorial-get-started-with-tailwind-css-in-15-minutes\/attachment\/eqvgm1vj3y1eaoa8ylom\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/eqvgm1vj3y1eaoa8ylom.png\" data-orig-size=\"800,429\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"eqvgm1vj3y1eaoa8ylom\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/eqvgm1vj3y1eaoa8ylom-300x161.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/eqvgm1vj3y1eaoa8ylom.png\" loading=\"lazy\" width=\"800\" height=\"429\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/eqvgm1vj3y1eaoa8ylom.png\" alt=\"\" class=\"wp-image-4002\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/eqvgm1vj3y1eaoa8ylom.png 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/eqvgm1vj3y1eaoa8ylom-300x161.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/eqvgm1vj3y1eaoa8ylom-768x412.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>The home page has a really cool example of how to work with Tailwind:<\/p>\n\n\n\n<h3 id=\"toc-a-quick-example-building-a-card\">A Quick Example &#8211; Building a Card<\/h3>\n\n\n\n<p>Here&#8217;s an example of a Bootstrap card vs a Tailwind card component. Warning: This may look very weird and you may dismiss Tailwind after this example. Give it some more time and a few practice examples and you&#8217;ll start to see the power of utility classes and the idea of\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Composition_over_inheritance\">composition over inheritance<\/a>.<\/p>\n\n\n\n<h3 id=\"toc-a-bootstrap-card-\"><a href=\"https:\/\/getbootstrap.com\/docs\/4.4\/components\/card\/\">A\u00a0Bootstrap card<\/a>:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"card\" style=\"width: 18rem;\">\n  &lt;div class=\"card-body\">\n\n        &lt;h5 class=\"card-title\">Card Title&lt;\/h5>\n        &lt;p class=\"card-text\">Content goes here&lt;\/p>\n\n    &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>While the Bootstrap card is easy to create, it isn&#8217;t the easiest to customize to our own applications. You&#8217;ll need to override this\u00a0<code>.card<\/code>\u00a0class and maybe even regretfully use\u00a0<code>!important<\/code>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"4003\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/tutorial-get-started-with-tailwind-css-in-15-minutes\/attachment\/wynfxsgsd0dfvhf8nltl\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wynfxsgsd0dfvhf8nltl.png\" data-orig-size=\"800,342\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wynfxsgsd0dfvhf8nltl\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wynfxsgsd0dfvhf8nltl-300x128.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wynfxsgsd0dfvhf8nltl.png\" loading=\"lazy\" width=\"800\" height=\"342\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wynfxsgsd0dfvhf8nltl.png\" alt=\"\" class=\"wp-image-4003\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wynfxsgsd0dfvhf8nltl.png 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wynfxsgsd0dfvhf8nltl-300x128.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wynfxsgsd0dfvhf8nltl-768x328.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Let&#8217;s see Tailwind Card:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"bg-white rounded shadow border p-6 w-64\">\n  &lt;h5 class=\"text-3xl font-bold mb-4 mt-0\">My Title&lt;\/h5>\n  &lt;p class=\"text-gray-700 text-sm\">Content goes here&lt;\/p>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>We are using many utility classes to achieve a card. While this looks like a little more work upfront, the biggest benefit is that you can\u00a0<strong>customize to your style quickly and easily<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"4004\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/tutorial-get-started-with-tailwind-css-in-15-minutes\/attachment\/wkeppbh1yvrn2jpremkn\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wkeppbh1yvrn2jpremkn.png\" data-orig-size=\"800,439\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wkeppbh1yvrn2jpremkn\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wkeppbh1yvrn2jpremkn-300x165.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wkeppbh1yvrn2jpremkn.png\" loading=\"lazy\" width=\"800\" height=\"439\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wkeppbh1yvrn2jpremkn.png\" alt=\"\" class=\"wp-image-4004\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wkeppbh1yvrn2jpremkn.png 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wkeppbh1yvrn2jpremkn-300x165.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/wkeppbh1yvrn2jpremkn-768x421.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Here&#8217;s the&nbsp;<a href=\"https:\/\/codepen.io\/chrisoncode\/pen\/NWqPbgQ?editors=1000\">CodePen<\/a>. Here&#8217;s a breakdown of the classes for the card:<\/p>\n\n\n\n<ul><li>bg-white:&nbsp;<code>background: #fff<\/code><\/li><li>rounded:&nbsp;<code>border-radius: 0.25rem<\/code><\/li><li>shadow:&nbsp;<code>0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)<\/code><\/li><li>border:&nbsp;<code>border-width: 1px<\/code><\/li><li>p-6:&nbsp;<code>padding: 1.5rem<\/code><\/li><li>w-64:&nbsp;<code>width: 16rem<\/code><\/li><\/ul>\n\n\n\n<p>Here&#8217;s the classes for the title:<\/p>\n\n\n\n<ul><li>text-3xl:&nbsp;<code>font-size: 1.875rem<\/code><\/li><li>font-bold:&nbsp;<code>font-weight: 700<\/code><\/li><li>mb-4:&nbsp;<code>margin-bottom: .75rem<\/code><\/li><li>mt-0:&nbsp;<code>margin-top: 0<\/code><\/li><\/ul>\n\n\n\n<p>Here&#8217;s the classes for the content:<\/p>\n\n\n\n<ul><li>text-gray-700:&nbsp;<code>color: #4a5568<\/code><\/li><li>text-sm:&nbsp;<code>font-size: .875rem<\/code><\/li><\/ul>\n\n\n\n<p><a href=\"https:\/\/tailwindcss.com\/\">Tailwind CSS<\/a>&nbsp;is an investment. If you want to write your CSS and design your apps faster, you&#8217;re gonna have to put in the time to learn the classes; this is the same as any technology that you want to benefit from.<\/p>\n\n\n\n<h3 id=\"toc-will-this-make-my-html-too-busy-\">Will this make my HTML too busy?<\/h3>\n\n\n\n<p>This can be seen as writing inline styles. There are many strategies to moving these classes out of your HTML and making them reusable. Here are some tactics for cleaning up our Tailwind classes:<\/p>\n\n\n\n<ul><li>Using Sass and moving our classes out of HTML<\/li><li>Using JS components (React\/Vue) and only having to write classes once<\/li><\/ul>\n\n\n\n<p>Here&#8217;s an example of using the\u00a0<a href=\"https:\/\/tailwindcss.com\/docs\/functions-and-directives\/#apply\">Tailwind @apply function<\/a>\u00a0to clean up your HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.btn {\n  @apply font-bold py-2 px-4 rounded;\n}\n\n.btn-blue {\n  @apply bg-blue-500 text-white;\n}\n\n.btn-blue:hover {\n  @apply bg-blue-700;\n}<\/code><\/pre>\n\n\n\n<p>An approach that I personally like is keeping the classes in the template and then finding ways to make that template reusable. React components is a good example of this.<\/p>\n\n\n\n<p>We&#8217;ll talk about that more later. For now, we need to focus on how we can use Tailwind to build things.<\/p>\n\n\n\n<h2 id=\"toc-what-is-tailwind-css-\">What is Tailwind CSS?<\/h2>\n\n\n\n<p>Now that we&#8217;ve seen a quick example, let&#8217;s dig deeper.\u00a0<a href=\"https:\/\/tailwindcss.com\/\">Tailwind CSS<\/a>\u00a0is a CSS framework that may be different than what you&#8217;ve used in the past. When most people think of CSS frameworks, they usually think of the most popular one,\u00a0<a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a>, or any of the very popular ones like\u00a0<a href=\"https:\/\/foundation.zurb.com\/\">Foundation<\/a>\u00a0or\u00a0<a href=\"https:\/\/bulma.io\/\">Bulma<\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>Tailwind is a different type of framework. Instead of pre-built components, Tailwind provides utility classes.<\/em><\/p><\/blockquote>\n\n\n\n<h3 id=\"toc-here-are-some-types-of-classes-tailwind-provides\">Here are some types of classes Tailwind provides<\/h3>\n\n\n\n<p>When we talk about utility classes, we mean that we have a multitude of classes that we can use. These will link direclty to the Tailwind docs.<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/tailwindcss.com\/docs\/background-color\">Background Color<\/a><\/li><li><a href=\"https:\/\/tailwindcss.com\/docs\/padding\">Padding<\/a><\/li><li><a href=\"https:\/\/tailwindcss.com\/docs\/flex-direction\">Flexbox<\/a><\/li><li><a href=\"https:\/\/tailwindcss.com\/docs\/grid-template-columns\">Grid<\/a><\/li><li><a href=\"https:\/\/tailwindcss.com\/docs\/font-size\">Font Size<\/a><\/li><\/ul>\n\n\n\n<p>The Tailwind docs are very good at helping us find what we need. You&#8217;ll find yourself browsing the docs often while you are learning the classes.\u00a0<strong>A tip<\/strong>\u00a0is to use the keyboard shortcut for\u00a0<code>\/<\/code>\u00a0to focus the search bar.<\/p>\n\n\n\n<h2 id=\"toc-the-benefits-of-tailwind\">The\u00a0Benefits of Tailwind<\/h2>\n\n\n\n<p>You may be wondering, &#8220;why should we use a utility class framework that will make our HTML seem busier?&#8221;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>Most CSS frameworks do too much.<\/em><\/p><\/blockquote>\n\n\n\n<p>When using Bootstrap or something similar, we&#8217;ll have a lot pre-built classes like&nbsp;<code>card<\/code>,&nbsp;<code>navbar<\/code>, and more. As soon as we want to customize those things for our own projects, we&#8217;ll have to write custom CSS and try to override the base styles.<\/p>\n\n\n\n<p>This can lead to busy CSS where you are writing styles to undo styles!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>Tailwind gives us a &#8220;use what you need&#8221; approach.<\/em><\/p><\/blockquote>\n\n\n\n<p>This benefit will be more apparent the more time you spend with the framework. Let&#8217;s go over some benefits and build a few things.<\/p>\n\n\n\n<h3 id=\"toc-bundle-size\">Bundle Size<\/h3>\n\n\n\n<p>Tailwind on its own is a large CSS framework. This is because of how many utility classes come with it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"4005\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/tutorial-get-started-with-tailwind-css-in-15-minutes\/attachment\/kpzu1i0c9zzvyidc5ftr\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/kpzu1i0c9zzvyidc5ftr.png\" data-orig-size=\"800,369\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"kpzu1i0c9zzvyidc5ftr\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/kpzu1i0c9zzvyidc5ftr-300x138.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/kpzu1i0c9zzvyidc5ftr.png\" loading=\"lazy\" width=\"800\" height=\"369\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/kpzu1i0c9zzvyidc5ftr.png\" alt=\"\" class=\"wp-image-4005\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/kpzu1i0c9zzvyidc5ftr.png 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/kpzu1i0c9zzvyidc5ftr-300x138.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/kpzu1i0c9zzvyidc5ftr-768x354.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>The big benefit is when we use a tool called&nbsp;<a href=\"https:\/\/www.purgecss.com\/\">Purgecss<\/a>&nbsp;to&nbsp;<a href=\"https:\/\/tailwindcss.com\/docs\/controlling-file-size\">control our file size<\/a>.&nbsp;<a href=\"https:\/\/www.purgecss.com\/\">Purgecss<\/a>&nbsp;will look at our HTML and find the Tailwind classes that are being used. Any classes that we don&#8217;t use will be removed from our final CSS file\/bundle.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>We can remove all the classes that we aren&#8217;t using. Our CSS could be as small as 13kb!<\/em><\/p><\/blockquote>\n\n\n\n<h3 id=\"toc-easy-to-customize\">Easy to Customize<\/h3>\n\n\n\n<p>Tailwind allows us to&nbsp;<a href=\"https:\/\/tailwindcss.com\/docs\/configuration\">customize everything<\/a>&nbsp;about our classes. We can change the color palette, size of fonts, paddings, responsiveness, and more.<\/p>\n\n\n\n<p>We can create a\u00a0<code>tailwind.config.js<\/code>\u00a0and write our config changes in there. Anything in this file will override the Tailwind\u00a0<a href=\"https:\/\/github.com\/tailwindcss\/tailwindcss\/blob\/master\/stubs\/defaultConfig.stub.js\">default config<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Example `tailwind.config.js` file\n\nmodule.exports = {\n  important: true,\n  theme: {\n    fontFamily: {\n      display: ['Gilroy', 'sans-serif'],\n      body: ['Graphik', 'sans-serif'],\n    },\n    extend: {\n      colors: {\n        cyan: '#9cdbff',\n      },\n      margin: {\n        '96': '24rem',\n        '128': '32rem',\n      },\n    }\n  },\n  variants: {\n    opacity: ['responsive', 'hover']\n  }\n}<\/code><\/pre>\n\n\n\n<h3 id=\"toc-quick-to-responsive\">Quick to Responsive<\/h3>\n\n\n\n<p>We can write in responsiveness using the utlity classes Tailwind provides. I was never a fan of writing my own CSS to create responsive breakpoints.<\/p>\n\n\n\n<p>With Tailwind, we can write our responsive styles by prefixing the utility classes with:<\/p>\n\n\n\n<ul><li><code>sm<\/code>: min-width: 640px<\/li><li><code>md<\/code>: min-width: 768px<\/li><li><code>lg<\/code>: min-width: 1024px<\/li><li><code>xl<\/code>: min-width: 1280px<\/li><\/ul>\n\n\n\n<p>Let&#8217;s say we want a box to be blue at larger screens and red at smaller screens. We start with mobile and add the class for blue for larger screens:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"bg-red-400 lg:bg-blue-400\">\n    &lt;p>i am red on small and medium devices&lt;\/p>\n\n    &lt;p>i am blue on large and extra large devices&lt;\/p>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h3 id=\"toc-super-fast-prototyping-if-you-know-css-well-\">Super Fast Prototyping (if you know CSS well)<\/h3>\n\n\n\n<p>My favorite feature of Tailwind is how fast I can create great designs in browser. Tailwind won&#8217;t give you perfect designs. It just gives you the tools to quickly create. I&#8217;ve never considered myself a designer and I don&#8217;t use tools like Figma. I&#8217;d rather jump right into the code and design in browser.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>You need to know your CSS well if you want to use Tailwind.<\/em><\/p><\/blockquote>\n\n\n\n<p>Using Tailwind will make sure you know your CSS classes as it doesn&#8217;t hide any of CSS behind component classes. If you use a Bootstrap&nbsp;<code>card<\/code>, you may not know what goes into that&nbsp;<code>card<\/code>&nbsp;class. When you use Tailwind, you&#8217;ll know exactly what CSS you&#8217;re getting.<\/p>\n\n\n\n<h2 id=\"toc-conclusion\"><a href=\"https:\/\/scotch.io\/tutorials\/get-started-with-tailwind-css-in-15-minutes#toc-conclusion\">Conclusion<\/a><\/h2>\n\n\n\n<p>Tailwind CSS is a different way of looking at your CSS. It provides a great foundation to quickly create any type of design you want.<\/p>\n\n\n\n<p>It may take some getting used to, but I believe it&#8217;s worth the effort.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>You&#8217;ll never need to override CSS framework classes again.<\/em><\/p><\/blockquote>\n\n\n\n<p>Stay tuned as we&#8217;ll be building more things with Tailwind!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tailwind CSS\u00a0is a CSS framework that gives you utility classes instead of pre-built components. One of out favorite things that we&#8217;ve found after using Tailwind: You&#8217;ll never need to override CSS framework classes again. The home page has a really cool example of how to work with Tailwind: A Quick Example &#8211; Building a Card [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":4006,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[7,62],"tags":[28,110],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/qnsrrtzsabgzooi3ifry.png.jpeg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-12x","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4001"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=4001"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4001\/revisions"}],"predecessor-version":[{"id":4007,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4001\/revisions\/4007"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/4006"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=4001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=4001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=4001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}