{"id":247,"date":"2019-05-19T11:33:46","date_gmt":"2019-05-19T11:33:46","guid":{"rendered":"https:\/\/completewebcharleston.com\/?p=247"},"modified":"2023-05-09T18:26:47","modified_gmt":"2023-05-09T18:26:47","slug":"why-tailwind-css-is-great-for-wordpress-5-0","status":"publish","type":"post","link":"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/","title":{"rendered":"Why Tailwind.css is great for WordPress 5.0"},"content":{"rendered":"\n<h2 class=\"has-text-align-left wp-block-heading\">What is Tailwind.css?<\/h2>\n\n\n\n<p>Tailwind.css is a utility CSS framework meaning that it is a stylesheet that comes with predetermined classes that can be used to style any element of a website. With Tailwind there is no need to actually write your own CSS classes and styles. This is good for the following reasons:<\/p>\n\n\n\n<ul>\n<li><strong>Fast Front-End Development <\/strong><\/li>\n\n\n\n<li><strong>Lightweight CSS Files <\/strong>(Must use PurgeCSS)<\/li>\n\n\n\n<li><strong>Consistency throughout <\/strong>(Less CSS bugs, layout issues and surprise! CSS domino effects) <\/li>\n\n\n\n<li><strong>Pre-cached<\/strong> (No need to keep asking clients to clear their cache!)<\/li>\n\n\n\n<li><strong>Set Classes different browser widths without writing media queries<\/strong><\/li>\n\n\n\n<li><strong>Extremely Customizable<\/strong><\/li>\n\n\n\n<li><strong>Fun to work with<\/strong><\/li>\n\n\n\n<li><strong>No need to &#8220;rediscover&#8221; old project CSS files<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"text-sm\">A big thank you to the Tailwind.css founders that have put in the long hours of hard work to make this amazing framework what it is today. Tailwind has cut my development time in half, allowing for more projects to be completed in less time. <\/p>\n\n\n\n<p>Thank you to: <a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/adamwathan\" target=\"_blank\"><strong>@adamwathan <\/strong><\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/reinink\" target=\"_blank\">@<\/a><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/reinink\" target=\"_blank\">reinink<\/a><\/strong> <a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/davidhemphill\" target=\"_blank\">@<\/a><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/davidhemphill\" target=\"_blank\">davidhemphill\ufeff<\/a><\/strong><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/steveschoger\" target=\"_blank\">@<\/a><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/steveschoger\" target=\"_blank\">steveschoger\ufeff<\/a><\/strong><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why is Tailwind.css great  to use with Gutenburg (WP 5.0)?<\/h2>\n\n\n\n<p>To get to the point of this post, the great thing about using Tailwind with WordPress 5.0 is that you can apply the Tailwind classes to the WordPress blocks. <\/p>\n\n\n\n<p><strong>Here is an example of adding one of the Tailwind.css utility classes to a WordPress editor block.<\/strong><\/p>\n\n\n\n<p>Before WordPress upgraded to using block style editing, one of the biggest issues was trying to add space between text. With Tailwind, this becomes easy to control any element on the page. To add a 2.5 rem margin to the bottom of my page header, all that is needed is to click on the block and add the class to the &#8220;advanced&#8221; field for that block. Adding the &#8220;mb-10&#8221; (Margin bottom 2.5 rem) will easily solve this.<\/p>\n\n\n\n<ol>\n<li>First .GIF is adding the class to the block.<\/li>\n\n\n\n<li>Second .GIF is the result of the padding.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"372\" src=\"https:\/\/completewebcharleston.com\/wp-content\/uploads\/2019\/05\/adding-classes-to-wp-blocks.gif\" alt=\"Adding Tailwind.css to WordPress blocks\" class=\"wp-image-322\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"336\" src=\"https:\/\/completewebcharleston.com\/wp-content\/uploads\/2019\/05\/adding-classes-to-wp-blocks-2.gif\" alt=\"Adding Tailwind.css to WordPress blocks\" class=\"wp-image-323\"\/><figcaption class=\"wp-element-caption\"><br><br><\/figcaption><\/figure>\n\n\n\n<p>Tailwind.css is much more powerful than just adding a margin. We could change the background color (bg-grey), change the text color (text-blue), padding, and anything else<a href=\"https:\/\/tailwindcss.com\/docs\/installation\/\"> listed in the Tailwind.css documentation here <\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to add to your theme<\/h2>\n\n\n\n<p>To add Tailwind to any project or theme you could just add the CDN link to experiment with the framework. <\/p>\n\n\n\n<p><strong>The best way to add Tailwind.css is to start with a Skelton base WordPress theme and build the theme from scratch using the Tailwind classes<\/strong>. This is get a bit more involved for WordPress developers that are just used to installing prebuilt themes with page-builders. You need to be able to develop locally using Node.js and terminal. Once you get the initial set-up complete, development is a breeze!<\/p>\n\n\n\n<p>We use Tailwind in all our website design and development. This is great for our clients that want to be able to add the Tailwind.css classes throughout the site and have better control over the content they create.<\/p>\n\n\n\n<p><strong>Here are some of recent sites we have built using Tailwind.css:<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/completewebcharleston.com\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"This website is using Tailwind.css Completewebcharleston.com (opens in a new tab)\">This website is using Tailwind.css Completewebcharleston.com<\/a><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"Alfano Furniture (opens in a new tab)\" href=\"http:\/\/alfanofurniture.com\/\" target=\"_blank\">Alfano Furniture<\/a><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"Dr. Desiree Pearson Phd (opens in a new tab)\" href=\"https:\/\/desireepearsonphd.com\/\" target=\"_blank\">Dr. Desiree Pearson Phd<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/gcamplasma.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"GCAM (opens in a new tab)\">GCAM<\/a><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"Pinnacle 1 Tax Services (opens in a new tab)\" href=\"http:\/\/www.p1.tax\/\" target=\"_blank\">Pinnacle 1 Tax Services<\/a><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"Sanctuary Investment Group (opens in a new tab)\" href=\"https:\/\/sanctuaryopportunityfunds.com\/\" target=\"_blank\">Sanctuary Investment Group<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/careermovesllc.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Career Moves, LLC (opens in a new tab)\">Career Moves, LLC<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is Tailwind.css? Tailwind.css is a utility CSS framework meaning that it is a stylesheet that comes with predetermined classes that can be used to style any element of a website. With Tailwind there is no need to actually write your own CSS classes and styles. This is good for the following reasons: A big [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":312,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Why Tailwind.css is great for WordPress 5.0 - Complete Web Charleston<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why Tailwind.css is great for WordPress 5.0 - Complete Web Charleston\" \/>\n<meta property=\"og:description\" content=\"What is Tailwind.css? Tailwind.css is a utility CSS framework meaning that it is a stylesheet that comes with predetermined classes that can be used to style any element of a website. With Tailwind there is no need to actually write your own CSS classes and styles. This is good for the following reasons: A big [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/\" \/>\n<meta property=\"og:site_name\" content=\"Complete Web Charleston\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-19T11:33:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-09T18:26:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/completewebcharleston.com\/wp-content\/uploads\/2019\/05\/tailwind-css-wordpress-gutenburg.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"650\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Houston\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Houston\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/\",\"url\":\"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/\",\"name\":\"Why Tailwind.css is great for WordPress 5.0 - Complete Web Charleston\",\"isPartOf\":{\"@id\":\"https:\/\/completewebcharleston.com\/#website\"},\"datePublished\":\"2019-05-19T11:33:46+00:00\",\"dateModified\":\"2023-05-09T18:26:47+00:00\",\"author\":{\"@id\":\"https:\/\/completewebcharleston.com\/#\/schema\/person\/c8e8bc2a1e02425427847c8889f39ff8\"},\"breadcrumb\":{\"@id\":\"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/completewebcharleston.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why Tailwind.css is great for WordPress 5.0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/completewebcharleston.com\/#website\",\"url\":\"https:\/\/completewebcharleston.com\/\",\"name\":\"Complete Web Charleston\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/completewebcharleston.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/completewebcharleston.com\/#\/schema\/person\/c8e8bc2a1e02425427847c8889f39ff8\",\"name\":\"Jason Houston\",\"description\":\"Jason is a Front-End Web Developer, Designer, SEO Consultant, and owner of Complete Web. He has 15 years experience working in website development. For new site work you can reach Jason here.\",\"url\":\"https:\/\/completewebcharleston.com\/author\/jasonmycompleteweb-net\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why Tailwind.css is great for WordPress 5.0 - Complete Web Charleston","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/","og_locale":"en_US","og_type":"article","og_title":"Why Tailwind.css is great for WordPress 5.0 - Complete Web Charleston","og_description":"What is Tailwind.css? Tailwind.css is a utility CSS framework meaning that it is a stylesheet that comes with predetermined classes that can be used to style any element of a website. With Tailwind there is no need to actually write your own CSS classes and styles. This is good for the following reasons: A big [&hellip;]","og_url":"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/","og_site_name":"Complete Web Charleston","article_published_time":"2019-05-19T11:33:46+00:00","article_modified_time":"2023-05-09T18:26:47+00:00","og_image":[{"width":650,"height":500,"url":"https:\/\/completewebcharleston.com\/wp-content\/uploads\/2019\/05\/tailwind-css-wordpress-gutenburg.jpg","type":"image\/jpeg"}],"author":"Jason Houston","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jason Houston","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/","url":"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/","name":"Why Tailwind.css is great for WordPress 5.0 - Complete Web Charleston","isPartOf":{"@id":"https:\/\/completewebcharleston.com\/#website"},"datePublished":"2019-05-19T11:33:46+00:00","dateModified":"2023-05-09T18:26:47+00:00","author":{"@id":"https:\/\/completewebcharleston.com\/#\/schema\/person\/c8e8bc2a1e02425427847c8889f39ff8"},"breadcrumb":{"@id":"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/completewebcharleston.com\/why-tailwind-css-is-great-for-wordpress-5-0\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/completewebcharleston.com\/"},{"@type":"ListItem","position":2,"name":"Why Tailwind.css is great for WordPress 5.0"}]},{"@type":"WebSite","@id":"https:\/\/completewebcharleston.com\/#website","url":"https:\/\/completewebcharleston.com\/","name":"Complete Web Charleston","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/completewebcharleston.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/completewebcharleston.com\/#\/schema\/person\/c8e8bc2a1e02425427847c8889f39ff8","name":"Jason Houston","description":"Jason is a Front-End Web Developer, Designer, SEO Consultant, and owner of Complete Web. He has 15 years experience working in website development. For new site work you can reach Jason here.","url":"https:\/\/completewebcharleston.com\/author\/jasonmycompleteweb-net\/"}]}},"_links":{"self":[{"href":"https:\/\/completewebcharleston.com\/wp-json\/wp\/v2\/posts\/247"}],"collection":[{"href":"https:\/\/completewebcharleston.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/completewebcharleston.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/completewebcharleston.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/completewebcharleston.com\/wp-json\/wp\/v2\/comments?post=247"}],"version-history":[{"count":0,"href":"https:\/\/completewebcharleston.com\/wp-json\/wp\/v2\/posts\/247\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/completewebcharleston.com\/wp-json\/wp\/v2\/media\/312"}],"wp:attachment":[{"href":"https:\/\/completewebcharleston.com\/wp-json\/wp\/v2\/media?parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/completewebcharleston.com\/wp-json\/wp\/v2\/categories?post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/completewebcharleston.com\/wp-json\/wp\/v2\/tags?post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}