{"id":7485,"date":"2024-05-02T15:47:40","date_gmt":"2024-05-02T19:47:40","guid":{"rendered":"https:\/\/treize.pro\/non-classifiee\/tailwind-css-revolutionizing-the-front-end\/"},"modified":"2024-05-02T15:47:40","modified_gmt":"2024-05-02T19:47:40","slug":"tailwind-css-revolutionizing-the-front-end","status":"publish","type":"post","link":"https:\/\/treize.pro\/en\/development\/tailwind-css-revolutionizing-the-front-end\/","title":{"rendered":"Tailwind CSS: Revolutionizing the Front End"},"content":{"rendered":"<p>When building a website, one of the most important elements to focus on for guaranteed success is visual appeal. Flawless art direction\u2014whether simple or unlike anything seen before\u2014is necessary to capture users\u2019 attention. For front-end developers, it is crucial to properly implement the chosen design, and on the internet, this is done through the CSS programming language.  <\/p>\n<p>Today, I\u2019m introducing a framework that has revolutionized the way we develop the front end: Tailwind CSS!<\/p>\n<h3>What is Tailwind CSS?<\/h3>\n<p>As mentioned above, Tailwind CSS is a framework\u2014in other words, a toolbox. It allows developers to code more flexibly and efficiently. Tailwind works by scanning all files that may contain style classes to apply (HTML, JavaScript, etc.) in search of custom classes, then generating the corresponding styles and writing them into a static CSS file.  <\/p>\n<p>What you need to understand here is that, unlike traditional CSS where styles are generally written in files external to the HTML, Tailwind CSS lets you write them directly in the HTML files, on the elements themselves! Here is an example: <\/p>\n<p>Instead of doing this:<\/p>\n<p><strong>example.html<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/t2278267.p.clickup-attachments.com\/t2278267\/b617692b-f7e8-40dc-b37e-d38f42dcb1fd\/image.png\" alt=\"html\" width=\"831\" height=\"190\"><\/p>\n<p><strong>example.css<br \/>\n<\/strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/t2278267.p.clickup-attachments.com\/t2278267\/ed5c5108-2fa6-468a-9231-3d5f23f7f90e\/image.png\" alt=\"css\" width=\"832\" height=\"1090\"><\/p>\n<p>Tailwind lets you achieve the same result by doing this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/t2278267.p.clickup-attachments.com\/t2278267\/2d75619e-5bc9-42c0-827c-6b5ae8b119c7\/image.png\" alt=\"tailwindcss\" width=\"1002\" height=\"186\"><\/p>\n<p>And you get this:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/lh7-us.googleusercontent.com\/tNmKMAo-cFIgiMkWr63lsuoRM0PHw1DVZ_vTPBIwiGiqxLU-yy6kPi1trloXLhlXZk7IP1zl1ktIAgkFKXzLtLRK5xqsGKMYjGT8yhtyEDVoMFXJxq8QQ7Ugiy2TKQuQgBjkoUbb9H5Zk_4fSBQ7oc8\" alt=\"result\" width=\"375\" height=\"194\" data-id=\"b3a18ef7-11e4-459a-b3be-6e41207beb5e.png\"><\/p>\n<p>How? With Tailwind utility classes that cover the most common CSS properties. Here are a few examples:  <\/p>\n<ul>\n<li>display: flex -&gt; <strong>flex<\/strong><\/li>\n<li>flex-direction: column -&gt; <strong>flex-col<\/strong><\/li>\n<li>align-items: center -&gt; <strong>items-center<\/strong><\/li>\n<li>color: white -&gt; <strong>text-white<\/strong><\/li>\n<li>position: relative -&gt; <strong>relative<\/strong><\/li>\n<li>width: 100% -&gt; <strong>w-full<\/strong><\/li>\n<\/ul>\n<p>For spacing, Tailwind offers predefined values based on a base of 4.<\/p>\n<ul>\n<li>padding: 4px -&gt;  <strong>p-1<\/strong><\/li>\n<li>padding-top: 8px -&gt; <strong>pt-2<\/strong><\/li>\n<li>padding-right: 16px -&gt; <strong>pr-4<\/strong><\/li>\n<li>padding-left: 32px -&gt; <strong>pl-8<\/strong><\/li>\n<li>padding: 40px 0px -&gt; <strong>py-10<\/strong><\/li>\n<li>padding: 0px 48px -&gt; <strong>px-12<\/strong><\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>However, it is entirely possible to use more precise values by writing them in brackets like this: <strong>p-[27px]<\/strong>.<\/p>\n<p>The vast majority of CSS classes have their Tailwind equivalent, but traditional CSS can also be used and compiled if you want to use a less common property\u2014just write it in brackets with no spaces: <strong>[backface-visibility:visible]<\/strong>.<\/p>\n<h3>Responsive<\/h3>\n<p>Tailwind also greatly simplifies a site\u2019s responsive design by allowing you to use simple, editable breakpoints directly in the HTML.<\/p>\n<p>The default breakpoints are as follows:<\/p>\n<ul>\n<li><strong><span class=\"token string-property property\">sm<\/span><\/strong><span class=\"token operator\">:<\/span><span> <\/span><span class=\"token string\">&#8216;640px&#8217;<\/span><span class=\"token punctuation\">,<\/span><\/li>\n<li><strong><span class=\"token string-property property\">md<\/span><\/strong><span class=\"token operator\">:<\/span><span> <\/span><span class=\"token string\">&#8216;768px&#8217;<\/span><span class=\"token punctuation\">,<\/span><\/li>\n<li><strong><span class=\"token string-property property\">lg<\/span><\/strong><span class=\"token operator\">:<\/span><span> <\/span><span class=\"token string\">&#8216;1024px&#8217;<\/span><span class=\"token punctuation\">,<\/span><\/li>\n<li><strong><span class=\"token string-property property\">xl<\/span><\/strong><span class=\"token operator\">:<\/span><span> <\/span><span class=\"token string\">&#8216;1280px&#8217;<\/span><span class=\"token punctuation\">,<\/span><span> <\/span><\/li>\n<li><strong><span class=\"token string-property property\">2xl<\/span><\/strong><span class=\"token operator\">:<\/span><span> <\/span><span class=\"token string\">&#8216;1536px&#8217;<\/span><span class=\"token punctuation\">,<\/span><span> <\/span><\/li>\n<\/ul>\n<p>An example of usage could look like this, where you can replace:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/t2278267.p.clickup-attachments.com\/t2278267\/a6696b74-2028-4d87-a9c7-e7e8b9d003be\/image.png\" alt=\"responsive example\" width=\"986\" height=\"1242\"><br \/>\nWith this:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/t2278267.p.clickup-attachments.com\/t2278267\/1929a4f9-9c3b-4986-90a5-66ec6058bebc\/image.png\" alt=\"tailwind responsive\" width=\"1004\" height=\"286\"><\/p>\n<p>Note that Tailwind CSS follows a &#8220;mobile first&#8221; approach, which means the base value given will be the one below 640px and each breakpoint will increase\u2014unlike &#8220;desktop first&#8221; development where the base value is 1920px and you go down with breakpoints.<\/p>\n<h3>Customization<\/h3>\n<p>If Tailwind\u2019s default variables do not suit a project, it is also possible to create and customize variables using an initial configuration file. You can therefore create new values for colors, typography, spacing, border radius, etc., and associate them with variables that can be reused to simplify the site development process as much as possible. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/t2278267.p.clickup-attachments.com\/t2278267\/9a281865-d231-40cb-8861-9cd014f7f1b7\/image.png\" alt=\"tailwind config\" width=\"1002\" height=\"1194\"><\/p>\n<h3>Practical examples<\/h3>\n<p>Here are a few practical examples!<\/p>\n<h4>A simple button:<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/t2278267.p.clickup-attachments.com\/t2278267\/7d6ae860-db7d-4841-8c3d-23be08ef1b38\/image.png\" alt=\"button example\" width=\"1003\" height=\"203\"><\/p>\n<p>In order, here is what we do: add 20px vertical padding, add 32px horizontal padding, maximum corner rounding, black background, white text, and uppercase letters.<\/p>\n<p>And here is the result:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/lh7-us.googleusercontent.com\/pYe44r2YzzLZkzZdbMFytjf8v54KXlnvccPIuODLnhniorq513blx8lSddWgni5TvNXXiqE8nD_tg1Zf2zXb25IsQxnIr4myBWpneMWj2xFzB83-xJzhKHjLgXb7bSISVMJAtYsg-Ykq4pQCq8qNqNU\" alt=\"button result\" width=\"254\" height=\"132\"><\/p>\n<h4>A list of cards:<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/t2278267.p.clickup-attachments.com\/t2278267\/badb1340-771a-4c63-b9d5-9f647ca73aeb\/image.png\" alt=\"Card example\" width=\"1002\" height=\"489\"><\/p>\n<p>Here we set <strong>div.container<\/strong> to display grid with three columns and 32px spacing.<\/p>\n<p>We add to <strong>each card<\/strong> 20px horizontal padding, 32px vertical padding, a black background with 10% opacity, then above 768px we change the horizontal padding to 32px and the vertical padding to 48px.<\/p>\n<p>For the <strong>first &lt;p&gt;<\/strong>, we add a 40px margin-bottom, set a text color, a font size of 42px, and a weight of 700 (i.e., bold), then above 1024px we change the margin-bottom to 48px.<\/p>\n<p>On the<strong> &lt;h3&gt;<\/strong>, we set the text to a font size of 32px and a weight of 700 (bold).<\/p>\n<p>Finally, on the <strong>last &lt;p&gt;<\/strong>, we set a margin-top of 8px by default and 12px once above 1024px.<\/p>\n<p>And here is the result:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/t2278267.p.clickup-attachments.com\/t2278267\/d2e1fbce-fc59-4941-b991-58748f589f16\/image.png\" alt=\"card result\" width=\"1002\" height=\"202\"><\/p>\n<h3>Conclusion<\/h3>\n<p>In short, whether you are a client or a developer, Tailwind CSS is a major time- and money-saver that is well worth trying!<\/p>\n<p>If this topic has piqued your curiosity and you would like to see Tailwind CSS\u2019s effectiveness in action, <a href=\"https:\/\/treize.pro\/en\/request-a-quote\/\">click here to access our quote request form<\/a> and we\u2019ll chat soon!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When building a website, one of the most important elements to focus on for guaranteed success is visual appeal. Flawless art direction\u2014whether simple or unlike anything seen before\u2014is necessary to capture users\u2019 attention. For front-end developers, it is crucial to properly implement the chosen design, and on the internet, this is done through the CSS [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":5366,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"wds_primary_category":1,"footnotes":""},"categories":[68],"class_list":["post-7485","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/posts\/7485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/comments?post=7485"}],"version-history":[{"count":0,"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/posts\/7485\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/media\/5366"}],"wp:attachment":[{"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/media?parent=7485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/categories?post=7485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}