{"id":313,"date":"2022-08-05T19:04:09","date_gmt":"2022-08-05T16:04:09","guid":{"rendered":"https:\/\/start.risingchina.net\/tailwind\/?p=313"},"modified":"2022-08-05T19:57:42","modified_gmt":"2022-08-05T16:57:42","slug":"kadence-tailwind-wireframe","status":"publish","type":"post","link":"https:\/\/start.risingchina.net\/tailwind\/kadence-tailwind-wireframe\/","title":{"rendered":"Create Tailwind Wireframe Template for Kadence Theme"},"content":{"rendered":"\n<p>A few days ago I decided to try the Tailwind system on a Kadence theme. I find a lot of good things about this system. Tailwind allows you to keep the rhythm of the layout, while the Kadence theme has the flexibility and speed of page loading.<\/p>\n\n\n\n<p>At the same time, Kadence recently announced a good opportunity to sell themes with cloud access. The main goal was to use as little customization and more customizer as possible.<\/p>\n\n\n\n<p>This is not a typical integration and is not tailwind itself. The goal is to recreate a similar style, the main thing I like about tailwind is that all sizes are a multiple of 8, let&#8217;s see if Kadence can manage all the parameters so flexibly.<\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id_544c82-5e .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id_544c82-5e .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id_544c82-5e .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id_544c82-5e .kb-table-of-content-wrap .kb-table-of-content-list{color:var(--global-palette5, #4A5568);font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id_544c82-5e .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry:hover{color:var(--global-palette3, #1A202C);}.kb-table-of-content-nav.kb-table-of-content-id_544c82-5e .kb-table-of-content-list li{margin-bottom:4px;}.kb-table-of-content-nav.kb-table-of-content-id_544c82-5e .kb-table-of-content-list li .kb-table-of-contents-list-sub{margin-top:4px;}<\/style>\n\n\n<h2 class=\"wp-block-heading\">Choosing Wireframe in Figma<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.figma.com\/community\/file\/1137429072536633879\">https:\/\/www.figma.com\/community\/file\/1137429072536633879<\/a><\/p>\n\n\n\n<p>I know a little bit about tailwind. There are many samples in the Figma community that you can use. I chose the simplest <a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/community\/file\/1115280671580274545\" target=\"_blank\">Minimal Wireframe Kit<\/a> by <a rel=\"noreferrer noopener\" href=\"https:\/\/www.bonniehong.com\/?utm_source=risingchina\" data-type=\"URL\" data-id=\"https:\/\/www.bonniehong.com\/?utm_source=risingchina\" target=\"_blank\">Bonnie Hong<\/a> and the <a href=\"https:\/\/www.figma.com\/community\/file\/1088418504991825797\" target=\"_blank\" rel=\"noreferrer noopener\">Flex UI Library <\/a>for Tailwind CSS by <a href=\"https:\/\/shuffle.dev\/marketplace\/flex?utm_source=risingchina\" data-type=\"URL\" data-id=\"https:\/\/shuffle.dev\/marketplace\/flex?utm_source=risingchina\" target=\"_blank\" rel=\"noreferrer noopener\">Shuffle<\/a> both based on the <a href=\"https:\/\/tailwindcss.com\/\" data-type=\"URL\" data-id=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tailwind CSS Design System<\/a><\/p>\n\n\n\n<p>The main goal of creating the Kadence Tailwind Wireframe Template was to help me figure out how to use the Tailwind rhythm styles with the Kadence theme with as little time, effort and affecting as little customization as possible. I wanted to keep the Kadence theme as clean as possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting up the customizer<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Layout settings<\/h3>\n\n\n\n<p>I set the width of General -&gt; Layout to 1248px *(Later I changed this value to 1216px)<\/p>\n\n\n\n<p>Content Left\/Right Edge Spacing:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Desktop<\/td><td>Tablet<\/td><td>Mobile<\/td><\/tr><tr><td>0<\/td><td>2<\/td><td>1<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Content Top and Bottom Spacing:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Desktop<\/td><td>Tablet<\/td><td>Mobile<\/td><\/tr><tr><td>4<\/td><td>3<\/td><td>2<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"971\" height=\"486\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-1.png\" alt=\"\" class=\"wp-image-184\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-1.png 971w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-1-300x150.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-1-768x384.png 768w\" sizes=\"auto, (max-width: 971px) 100vw, 971px\" \/><\/figure>\n\n\n\n<p><strong>*(I later changed this value to 1216px)<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Color setting<\/h3>\n\n\n\n<p>Left it as is.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Font setting<\/h3>\n\n\n\n<p>After a little analysis, I realized that it is enough to set the headings only for H1, H2, H3, H4<\/p>\n\n\n\n<p>Base Font: Inter 16px<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"heading-1\">Heading 1<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>Desktop<\/td><td>Tablet<\/td><td>Mobile<\/td><\/tr><tr><td>Font-size<\/td><td>60<\/td><td>48<\/td><td>32<\/td><\/tr><tr><td>Line-hight<\/td><td>1,4<\/td><td>1,4<\/td><td>1,5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"heading-2\">Heading 2<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>Desktop<\/td><td>Tablet<\/td><td>Mobile<\/td><\/tr><tr><td>Font-size<\/td><td>60<\/td><td>48<\/td><td>32<\/td><\/tr><tr><td>Line-hight<\/td><td>1,4<\/td><td>1,4<\/td><td>1,5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"heading-3\">Heading 3<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>Desktop<\/td><td>Tablet<\/td><td>Mobile<\/td><\/tr><tr><td>Font-size<\/td><td>24<\/td><td>24<\/td><td>24<\/td><\/tr><tr><td>Line-hight<\/td><td>1,5<\/td><td>1,5<\/td><td>1,5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"heading-4\">Heading 4<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>Desktop<\/td><td>Tablet<\/td><td>Mobile<\/td><\/tr><tr><td>Font-size<\/td><td>20<\/td><td>20<\/td><td>20<\/td><\/tr><tr><td>Line-hight<\/td><td>1,5<\/td><td>1,5<\/td><td>1,5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">The problem<\/h3>\n\n\n\n<p>Kadence has default margin after headings that are specified in em, which makes it difficult to set the margin in multiples of 8 for a 60px font for example. 0.5 em for which 30px instead of the required 32px<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.single-content h1,.single-content h2,.single-content h3,.single-content h4,.single-content h5,.single-content h6 {\n    margin: 1.5em 0 .5em\n}<\/code><\/pre>\n\n\n\n<p>I can&#8217;t say that em is not the right choice, but you would have to add a margin in the element&#8217;s layout. Although it could be solved by adding margin to the customizer.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Do you think it&#8217;s worth adding the ability for the user to set their own values to keep the code clean?<\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Button Settings<\/h3>\n\n\n\n<p>Border-radius: 6px<\/p>\n\n\n\n<p>Font-size 14 and letter spacing 20 from Figma for all screen sizes. (Later I set my spacing value, see below)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"787\" height=\"693\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/07\/image-1.png\" alt=\"\" class=\"wp-image-150\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/07\/image-1.png 787w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/07\/image-1-300x264.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/07\/image-1-768x676.png 768w\" sizes=\"auto, (max-width: 787px) 100vw, 787px\" \/><\/figure>\n\n\n\n<p>If you set padding in the customizer, it will only affect the M size, choose how you prefer<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"974\" height=\"116\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-3.png\" alt=\"\" class=\"wp-image-197\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-3.png 974w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-3-300x36.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-3-768x91.png 768w\" sizes=\"auto, (max-width: 974px) 100vw, 974px\" \/><\/figure>\n\n\n\n<p>The values for the buttons I took from the Flex UI: Large, Medium, Small button, respectively. By setting the values in this way my button will change according to the mobile device.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Page layout Settings<\/h3>\n\n\n\n<p>Not to be confused with Layout, this setting is in Posts\/Pages Layout -&gt; Page layout -&gt;<\/p>\n\n\n\n<p>Page Title Layout: in content<\/p>\n\n\n\n<p>Default Page Layout: normal<\/p>\n\n\n\n<p>Content Style: unboxed<\/p>\n\n\n\n<p>Content Vertical Padding: disable<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"978\" height=\"406\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-4.png\" alt=\"\" class=\"wp-image-199\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-4.png 978w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-4-300x125.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-4-768x319.png 768w\" sizes=\"auto, (max-width: 978px) 100vw, 978px\" \/><\/figure>\n\n\n\n<p>This is the end of the customizer setup.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block setup<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignright size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"429\" height=\"277\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/07\/image-6.png\" alt=\"\" class=\"wp-image-156\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/07\/image-6.png 429w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/07\/image-6-300x194.png 300w\" sizes=\"auto, (max-width: 429px) 100vw, 429px\" \/><\/figure>\n<\/div>\n\n\n<p>When working with blocks, we are interested in indents. They can be conventionally divided into two parts, the first is margin\/padding, which we can very conveniently set to 4 rem to achieve 64px, but the indent between columns, and as a consequence between rows on tablet and mobile we can only preset to choose<\/p>\n\n\n\n<p>I set it to No gutter 0px\/ This is the first place where we can&#8217;t set it to a multiple of eight.<\/p>\n\n\n\n<p>We can see that in the work with blocks we can not maintain and inherit gaps of multiples of 8, so you can use the section with a gap of 32 px. We will talk about them further on.<\/p>\n\n\n\n<p>The difference between using a row and a section is mainly that it is easier to assign a full width background image or color to a row and not to a section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Padding\/Margin<\/h3>\n\n\n\n<p>Despite the fact that the template uses 80px indent, I used a 64px indent, or rather 4rem? which is because the body-font is set to 16px (16*4=64)<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"854\" height=\"369\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image.png\" alt=\"\" class=\"wp-image-181\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image.png 854w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-300x130.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-768x332.png 768w\" sizes=\"auto, (max-width: 854px) 100vw, 854px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Image<\/h2>\n\n\n\n<p>I uploaded one image 590 by 425 pixels it is used through the whole template at Bonnie Hong, and in Flex UI too, there is no image that keeps the proportions in multiples of 8. Perhaps this is not necessary. Even the choice of image is a big separate topic.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"590\" height=\"425\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/07\/risingchina-tailwind-wireframe-image.png\" alt=\"\" class=\"wp-image-13\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/07\/risingchina-tailwind-wireframe-image.png 590w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/07\/risingchina-tailwind-wireframe-image-300x216.png 300w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Wireframe in Kadence<\/h2>\n\n\n\n<p>Now that all the basic settings are applied, we just drag the blocks and get the expected result.<\/p>\n\n\n\n<p>By default, the button does not inherit the theme styles. A switch will solve the situation, but it&#8217;s still not clear what those default styles are. Do you know?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"316\" height=\"153\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-2.png\" alt=\"\" class=\"wp-image-186\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-2.png 316w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-2-300x145.png 300w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/figure>\n\n\n\n<p>Let&#8217;s compare<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"450\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-5-1024x450.png\" alt=\"\" class=\"wp-image-200\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-5-1024x450.png 1024w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-5-300x132.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-5-768x337.png 768w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-5-1536x674.png 1536w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-5.png 1774w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Size of sections in Figma, red lines<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"384\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-6-1024x384.png\" alt=\"\" class=\"wp-image-201\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-6-1024x384.png 1024w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-6-300x113.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-6-768x288.png 768w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-6-1536x577.png 1536w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-6.png 1899w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Size of elements in the browser<\/figcaption><\/figure>\n\n\n\n<p>In the first section, we can illustrate the points that are not fulfilled by the customizer alone. Let&#8217;s add the missing settings through the widget settings.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Add a margin of 1rem (16px) to the header<\/li><li>Add a margin of 3rem (48 px) to the paragraph<\/li><li>Change section width to full width<\/li><li>Change the internal content width to &#8220;inherit from theme&#8221;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"954\" height=\"262\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-8.png\" alt=\"\" class=\"wp-image-234\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-8.png 954w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-8-300x82.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-8-768x211.png 768w\" sizes=\"auto, (max-width: 954px) 100vw, 954px\" \/><\/figure>\n\n\n\n<p>Let&#8217;s try to compare the result and make adjustments if necessary. The section below with the slider<\/p>\n\n\n\n\n\n<p>Not pixel perfect. Try inspecting the home page, what&#8217;s wrong?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hero Section<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Row and Section<\/h3>\n\n\n\n<p>Row is a nice and handy way to do everything except one. You cannot set the width of the inner section if it is part of the Row. What does this mean?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"847\" height=\"430\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-11.png\" alt=\"\" class=\"wp-image-240\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-11.png 847w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-11-300x152.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-11-768x390.png 768w\" sizes=\"auto, (max-width: 847px) 100vw, 847px\" \/><figcaption>Figma fixed columns width<\/figcaption><\/figure>\n\n\n\n<p>See, in Figma the left and right columns are fixed at 488px-left and 590px-right (equal to the width of the image, right?) When we get the relative width in kadence blocks by dividing the row by the percentage, then the width of the text elements will fill the entire space, in other words the width is not fixed, in fact section has no setting to fix this width, but the individual section element does.<\/p>\n\n\n\n<p>Here is our HERO section structure<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"338\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-12-1024x338.png\" alt=\"\" class=\"wp-image-253\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-12-1024x338.png 1024w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-12-300x99.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-12-768x253.png 768w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-12-1536x507.png 1536w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-12.png 1891w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">How do I set the width of the text elements?<\/h3>\n\n\n\n<p>I will give you some ways to control the width of the inner section:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Change the column width (for row-section) in the 45% picture<\/li><li>Add padding to left or right side of column (for row-section)<\/li><li>Add another row and set max-width (row-&gt;section-&gt;row)<\/li><li>Add another section and set max-width (row-&gt;section-&gt;section)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Change the column width<\/h3>\n\n\n\n<p>This method affects only one part, in our case the left one. We get the result we need but the right column will move after the slider and the picture will not be in the center like on the wireframe. You can easily fix this by aligning the image to the right. To do this, change Inner Block Direction to horizontal and the alignment will work.<\/p>\n\n\n\n<p>This method is limited in use if we need to adjust the width of two columns at once. In addition, there is a problem with the transition to the mobile version, because the indentation between columns in the mobile version is the indentation between mobile sections.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add padding<\/h3>\n\n\n\n<p>This method is relatively good, from Figma we see that the padding between columns is 112px, we can safely set the padding on the right side of the first column to 7rem, adjust the padding for tablet and mobile. We also need to set the gutter for the row, which can only be chosen from a preset of 0px 20px or 30px.<\/p>\n\n\n\n<p>Again we are not solving the problem for all media queries with one action.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add another row<\/h3>\n\n\n\n<p>This is an obvious solution that will get the results we need, but it generates a lot of code for one small problem. It is enough to insert a column row and set the max-width of the inserted row.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add another section<\/h3>\n\n\n\n<p>I like this solution, we can use the nested section add max-width and solve the problem, but we still can&#8217;t control the column width and indent between columns. Or can we? Let&#8217;s try to figure out the next section where there is a repeating nested picture-text section &#8211; feature card.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Feature card section<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Row-&gt;Row<\/h3>\n\n\n\n<p>I&#8217;m sure you use this method most often. We often use several nested rows. So we assemble the layout in the usual way. I will put one more row inside this one to set the max-width for the text part. Then for each feature card I will also set a row.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"514\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-17-1024x514.png\" alt=\"\" class=\"wp-image-278\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-17-1024x514.png 1024w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-17-300x150.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-17-768x385.png 768w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-17-1536x770.png 1536w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-17.png 1561w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This solution is used on the main page to look at and inspect.<\/p>\n\n\n\n<p>Note that the html code for the whole section is the longest<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>37 lines, 5888 characters\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"43\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-13.png\" alt=\"\" class=\"wp-image-270\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-13.png 812w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-13-300x16.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-13-768x41.png 768w\" sizes=\"auto, (max-width: 812px) 100vw, 812px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/start.risingchina.net\/tailwind\/section-section\/\" target=\"_blank\" rel=\"noreferrer noopener\">Section-&gt;Section<\/a><\/h3>\n\n\n\n<p>You know the section block now works as a flexbox. This gives us the advantage of using space-between and gap, which applies to both the distance between columns in the Desktop and the distance in the mobile version. Since we use space-between, the gap is just the indent for the mobile version. So with one setting we solve absolutely all problems.<\/p>\n\n\n\n<p>New information for you is the use of a section without rows.<\/p>\n\n\n\n<p><strong>Plus<\/strong>: the shortest code possible.<br><strong>Minus<\/strong>: You can&#8217;t set the background<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-18-1024x547.png\" alt=\"\" class=\"wp-image-279\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-18-1024x547.png 1024w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-18-300x160.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-18-768x410.png 768w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-18-1536x821.png 1536w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-18.png 1561w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This configuration is significantly less in the number of characters of the generated html code compared to the previous one: only 4122 characters, which is 30% less. Go here to inspect the version without the row<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>25 lines, 4122 characters\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"952\" height=\"29\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-15.png\" alt=\"\" class=\"wp-image-272\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-15.png 952w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-15-300x9.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-15-768x23.png 768w\" sizes=\"auto, (max-width: 952px) 100vw, 952px\" \/><\/figure>\n\n\n\n<p>If you need to add a background, you can&#8217;t do without a row.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/start.risingchina.net\/tailwind\/row-section-section\/\">Row-Section-Section<\/a><\/h3>\n\n\n\n<p>The last option is the best to use one row to add background you can look <a href=\"https:\/\/start.risingchina.net\/tailwind\/row-section-section\/\" target=\"_blank\" rel=\"noreferrer noopener\">here <\/a>and inspect.<\/p>\n\n\n\n<p>A universal combination of the first and second ways.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"832\" height=\"418\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-20.png\" alt=\"\" class=\"wp-image-292\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-20.png 832w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-20-300x151.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-20-768x386.png 768w\" sizes=\"auto, (max-width: 832px) 100vw, 832px\" \/><\/figure>\n\n\n\n<p>A handy feature if all the feature cards in one section then you can change the color of all the text elements with one click, but the preview refuses to display the color of the headers correctly, although at the front of everything is correct.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-21-1024x483.png\" alt=\"\" class=\"wp-image-291\" srcset=\"https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-21-1024x483.png 1024w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-21-300x141.png 300w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-21-768x362.png 768w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-21-1536x724.png 1536w, https:\/\/start.risingchina.net\/tailwind\/wp-content\/uploads\/sites\/23\/2022\/08\/image-21.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>4644 characters\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Kadence Theme allows you to control most of the parameters in a convenient manner from the customizer. Tailwind styled layouts require you to control the margin\/padding values, and more specifically require you to keep them a multiple of 8. This is easily done for 16px fonts and rem indents.<\/p>\n\n\n\n<p>Secondly, you need to control the width of the column and fix it without generating a lot of unnecessary code.<\/p>\n\n\n\n<p>The most optimal way in terms of code and layout convenience is double nesting section-&gt;section, this method limits the use of common background, but through the gap and space-between allows you to control the indentation lightning fast.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A few days ago I decided to try the Tailwind system on a Kadence theme. I find a lot of good things about this system. Tailwind allows you to keep the rhythm of the layout, while the Kadence theme has the flexibility and speed of page loading. At the same time, Kadence recently announced a&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-313","post","type-post","status-publish","format-standard","hentry","category-article"],"_links":{"self":[{"href":"https:\/\/start.risingchina.net\/tailwind\/wp-json\/wp\/v2\/posts\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/start.risingchina.net\/tailwind\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/start.risingchina.net\/tailwind\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/start.risingchina.net\/tailwind\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/start.risingchina.net\/tailwind\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":0,"href":"https:\/\/start.risingchina.net\/tailwind\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"wp:attachment":[{"href":"https:\/\/start.risingchina.net\/tailwind\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/start.risingchina.net\/tailwind\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/start.risingchina.net\/tailwind\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}