{"id":38,"date":"2025-09-26T08:50:51","date_gmt":"2025-09-26T08:50:51","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/style-rich-text-with-tailwind-classes\/"},"modified":"2025-10-29T07:07:12","modified_gmt":"2025-10-29T07:07:12","slug":"style-rich-text-with-tailwind-classes","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/style-rich-text-with-tailwind-classes\/","title":{"rendered":"Style rich text with Tailwind classes"},"content":{"rendered":"\n<p>Most WordPress blocks allow to enter <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/richtext\/\" target=\"_blank\" rel=\"noreferrer noopener\">rich text<\/a>, which means you can make selected text bold, italic, add links or even inline images. This functionality can be leveraged to style parts of the text with Tailwind classes.<\/p>\n\n\n\n<p>Select some text and make it italic with the rich text formatting controls which appear on the right side of the block toolbar:<\/p>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"364\" data-pswp-width=\"745\" data-ska-pswp=\"ska-pswp-1\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-77.png\" class=\"ring ring-site wp-block-ska-image image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-77.png\" alt=\"Rich text with Italic format applied\" width=\"745\" height=\"364\"\/><\/a>\n\n\n\n<p>Using the Italic format essentially wraps the part of the text with the <code>&lt;em><\/code> HTML element. This element can be styled with Tailwind classes.<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code\"><code class=\"\">&#91;&amp;_em]:not-italic &#91;&amp;_em]:text-primary<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>Or using a <a href=\"https:\/\/ska-blocks.com\/docs\/selectors\/\" data-type=\"post\" data-id=\"44\">selector<\/a>:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code json language-json\"><code class=\"language-json\">ska-blocks:{\"skaBlocksSelectors\":{\"&#91;&amp;_em]\":{\"skaBlocksFontStyle\":{\"v\":{\"$\":{\"@\":\"not-italic\"}}},\"skaBlocksTextColor\":{\"v\":{\"$\":{\"@\":\"primary\"}}}}}}<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p class=\"wp-block-ska-element\">\n<span class=\"wp-block-ska-text ska-text\">When pressing <\/span>\n\n\n\n<kbd class=\"wp-block-ska-text ska-text\">Shift + Enter<\/kbd>\n\n\n\n<span class=\"wp-block-ska-text ska-text\"> in a rich text input you can add a new line &#8211; creating a <code>&lt;br><\/code> tag &#8211; these can also be &#8220;styled&#8221; using a Tailwind class such as <code>max-sm:[&amp;>br]:hidden<\/code> to control what screen sizes use line breaks.<\/span>\n<\/p>\n\n\n\n<p>For more granular control of the HTML markup use multiple <a href=\"https:\/\/ska-blocks.com\/docs\/text-block\/\" data-type=\"post\" data-id=\"56\">Text blocks<\/a> (as <code>&lt;span><\/code>, <code>&lt;kbd><\/code>, <code>&lt;abbr><\/code>, etc elements) inserted into an <a href=\"https:\/\/ska-blocks.com\/docs\/element-block\/\" data-type=\"post\" data-id=\"57\">Element block<\/a> (rendered as <code>&lt;span><\/code> or <code>&lt;p><\/code> elements). Entering HTML markup directly into the <a href=\"https:\/\/ska-blocks.com\/docs\/tailwind-block\/\" data-type=\"post\" data-id=\"55\">Tailwind block<\/a> and pressing &#8220;Convert to blocks&#8221; can be used as a shortcut to produce the blocks you need.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Examples<\/h2>\n\n\n\n<div role=\"presentation\" class=\"wp-block-ska-element\"><div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<h2 class=\"[&amp;_em]:not-italic [&amp;_em]:text-primary wp-block-heading\">Test <em>heading<\/em>, please ignore<\/h2>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:heading {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[\\u0026_em]:not-italic [\\u0026_em]:text-primary&quot;,&quot;css&quot;:&quot;.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:not-italic em{font-style:normal}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:text-primary em{color:var(--color-primary)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_em]&quot;:{&quot;skaBlocksFontStyle&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;not-italic&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;primary&quot;}}}}}} --&gt;\n&lt;h2 class=&quot;[&amp;_em]:not-italic [&amp;_em]:text-primary wp-block-heading&quot;&gt;Test &lt;em&gt;heading&lt;\/em&gt;, please ignore&lt;\/h2&gt;\n&lt;!-- \/wp:heading --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<h2 class=\"lg:text-5xl [&amp;_em]:not-italic [&amp;_em]:underline [&amp;_em]:decoration-primary\/50 [&amp;_em]:decoration-solid [&amp;_em]:decoration-6 [&amp;_em]:underline-offset-4 [&amp;_em]:hover:underline-offset-8 [&amp;_em]:transition-[text-underline-offset] [&amp;_em]:hover:animate-pulse wp-block-heading\"><em>Test<\/em> heading, <em>please<\/em> ignore<\/h2>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:heading {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;lg:text-5xl [\\u0026_em]:not-italic [\\u0026_em]:underline [\\u0026_em]:decoration-primary\/50 [\\u0026_em]:decoration-solid [\\u0026_em]:decoration-6 [\\u0026_em]:underline-offset-4 [\\u0026_em]:hover:underline-offset-8 [\\u0026_em]:transition-[text-underline-offset] [\\u0026_em]:hover:animate-pulse&quot;,&quot;css&quot;:&quot;@media (min-width:64rem){.lg\\u005c:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:not-italic em{font-style:normal}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:underline em{text-decoration-line:underline}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:decoration-primary\\u005c\/50 em{text-decoration-color:#2ba2e580}@supports (color:color-mix(in lab, red, red)){.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:decoration-primary\\u005c\/50 em{-webkit-text-decoration-color:color-mix(in oklab,var(--color-primary)50%,transparent);-webkit-text-decoration-color:color-mix(in oklab,var(--color-primary)50%,transparent);text-decoration-color:color-mix(in oklab,var(--color-primary)50%,transparent)}}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:decoration-solid em{text-decoration-style:solid}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:decoration-6 em{text-decoration-thickness:6px}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:underline-offset-4 em{text-underline-offset:4px}@media (hover:hover){.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:hover\\u005c:underline-offset-8 em:hover{text-underline-offset:8px}}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:transition-\\u005c[text-underline-offset\\u005c] em{transition-property:text-underline-offset;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:hover\\u005c:animate-pulse em:hover{animation:var(--animate-pulse)}}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_em]&quot;:{&quot;skaBlocksFontStyle&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;not-italic&quot;}}},&quot;skaBlocksTextUnderlineOffset&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;4&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;8&quot;}}},&quot;skaBlocksTextDecoration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;underline&quot;}}},&quot;skaBlocksTextDecorationStyle&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;solid&quot;}}},&quot;skaBlocksTextDecorationThickness&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;6&quot;}}},&quot;skaBlocksTextDecorationColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;primary\/50&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[text-underline-offset]&quot;}},&quot;a&quot;:[&quot;[text-underline-offset]&quot;]},&quot;skaBlocksAnimation&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;pulse&quot;}}}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;lg&quot;:{&quot;@&quot;:&quot;5xl&quot;}}}} --&gt;\n&lt;h2 class=&quot;lg:text-5xl [&amp;_em]:not-italic [&amp;_em]:underline [&amp;_em]:decoration-primary\/50 [&amp;_em]:decoration-solid [&amp;_em]:decoration-6 [&amp;_em]:underline-offset-4 [&amp;_em]:hover:underline-offset-8 [&amp;_em]:transition-[text-underline-offset] [&amp;_em]:hover:animate-pulse wp-block-heading&quot;&gt;&lt;em&gt;Test&lt;\/em&gt; heading, &lt;em&gt;please&lt;\/em&gt; ignore&lt;\/h2&gt;\n&lt;!-- \/wp:heading --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<h2 class=\"lg:text-4xl [&amp;_em]:not-italic [&amp;_em]:font-light [&amp;_em]:tracking-tighter [&amp;_em]:uppercase wp-block-heading\">Test <em>heading<\/em>, please ignore<\/h2>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:heading {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;lg:text-4xl [\\u0026_em]:not-italic [\\u0026_em]:font-light [\\u0026_em]:tracking-tighter [\\u0026_em]:uppercase&quot;,&quot;css&quot;:&quot;@media (min-width:64rem){.lg\\u005c:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:not-italic em{font-style:normal}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:font-light em{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:tracking-tighter em{--tw-tracking:var(--tracking-tighter);letter-spacing:var(--tracking-tighter)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:uppercase em{text-transform:uppercase}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_em]&quot;:{&quot;skaBlocksFontStyle&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;not-italic&quot;}}},&quot;skaBlocksFontWeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;light&quot;}}},&quot;skaBlocksLetterSpacing&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;tighter&quot;}}},&quot;skaBlocksTextTransform&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;uppercase&quot;}}}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;lg&quot;:{&quot;@&quot;:&quot;4xl&quot;}}}} --&gt;\n&lt;h2 class=&quot;lg:text-4xl [&amp;_em]:not-italic [&amp;_em]:font-light [&amp;_em]:tracking-tighter [&amp;_em]:uppercase wp-block-heading&quot;&gt;Test &lt;em&gt;heading&lt;\/em&gt;, please ignore&lt;\/h2&gt;\n&lt;!-- \/wp:heading --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<h2 class=\"[&amp;_em]:px-3 lg:text-4xl [&amp;_em]:not-italic [&amp;_em]:tracking-tight [&amp;_em]:text-site-inverted [&amp;_em]:uppercase [&amp;_em]:bg-primary [&amp;_em]:rounded wp-block-heading\">Test <em>heading<\/em>, please ignore<\/h2>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:heading {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[\\u0026_em]:px-3 lg:text-4xl [\\u0026_em]:not-italic [\\u0026_em]:tracking-tight [\\u0026_em]:text-site-inverted [\\u0026_em]:uppercase [\\u0026_em]:bg-primary [\\u0026_em]:rounded&quot;,&quot;css&quot;:&quot;.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:px-3 em{padding-inline:var(--spacing-3)}@media (min-width:64rem){.lg\\u005c:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:not-italic em{font-style:normal}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:tracking-tight em{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:text-site-inverted em{color:var(--color-site-inverted)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:uppercase em{text-transform:uppercase}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:bg-primary em{background-color:var(--color-primary)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:rounded em{border-radius:var(--radius)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_em]&quot;:{&quot;skaBlocksFontStyle&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;not-italic&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-inverted&quot;}}},&quot;skaBlocksLetterSpacing&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;tight&quot;}}},&quot;skaBlocksTextTransform&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;uppercase&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;primary&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;lg&quot;:{&quot;@&quot;:&quot;4xl&quot;}}}} --&gt;\n&lt;h2 class=&quot;[&amp;_em]:px-3 lg:text-4xl [&amp;_em]:not-italic [&amp;_em]:tracking-tight [&amp;_em]:text-site-inverted [&amp;_em]:uppercase [&amp;_em]:bg-primary [&amp;_em]:rounded wp-block-heading&quot;&gt;Test &lt;em&gt;heading&lt;\/em&gt;, please ignore&lt;\/h2&gt;\n&lt;!-- \/wp:heading --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<h2 class=\"lg:text-5xl [&amp;_em]:not-italic [&amp;_em]:tracking-tight [&amp;_em]:text-transparent [&amp;_em]:bg-clip-text [&amp;_em]:bg-linear-to-br [&amp;_em]:from-primary\/50 [&amp;_em]:via-primary [&amp;_em]:to-pink-500 [&amp;_em]:rounded wp-block-heading\">Test <em>heading<\/em>, please ignore<\/h2>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:heading {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;lg:text-5xl [\\u0026_em]:not-italic [\\u0026_em]:tracking-tight [\\u0026_em]:text-transparent [\\u0026_em]:bg-clip-text [\\u0026_em]:bg-linear-to-br [\\u0026_em]:from-primary\/50 [\\u0026_em]:via-primary [\\u0026_em]:to-pink-500 [\\u0026_em]:rounded&quot;,&quot;css&quot;:&quot;@media (min-width:64rem){.lg\\u005c:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:not-italic em{font-style:normal}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:tracking-tight em{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:text-transparent em{color:#0000}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:bg-clip-text em{-webkit-background-clip:text;background-clip:text}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:bg-linear-to-br em{--tw-gradient-position:to bottom right;background-image:linear-gradient(var(--tw-gradient-stops))}@supports (background-image:linear-gradient(in lab, red, red)){.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:bg-linear-to-br em{--tw-gradient-position:to bottom right in oklab}}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:from-primary\\u005c\/50 em{--tw-gradient-from:#2ba2e580;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}@supports (color:color-mix(in lab, red, red)){.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:from-primary\\u005c\/50 em{--tw-gradient-from:color-mix(in oklab,var(--color-primary)50%,transparent)}}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:via-primary em{--tw-gradient-via:var(--color-primary);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:to-pink-500 em{--tw-gradient-to:var(--color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:rounded em{border-radius:var(--radius)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_em]&quot;:{&quot;skaBlocksFontStyle&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;not-italic&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;transparent&quot;}}},&quot;skaBlocksLetterSpacing&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;tight&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBackgroundClip&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;text&quot;}}},&quot;skaBlocksBackgroundGradient&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;linear&quot;:&quot;to-br&quot;}}},&quot;skaBlocksGradientColorStops&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;from&quot;:&quot;primary\/50&quot;,&quot;to&quot;:&quot;pink-500&quot;,&quot;via&quot;:&quot;primary&quot;}},&quot;t&quot;:&quot;default&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;lg&quot;:{&quot;@&quot;:&quot;5xl&quot;}}}} --&gt;\n&lt;h2 class=&quot;lg:text-5xl [&amp;_em]:not-italic [&amp;_em]:tracking-tight [&amp;_em]:text-transparent [&amp;_em]:bg-clip-text [&amp;_em]:bg-linear-to-br [&amp;_em]:from-primary\/50 [&amp;_em]:via-primary [&amp;_em]:to-pink-500 [&amp;_em]:rounded wp-block-heading&quot;&gt;Test &lt;em&gt;heading&lt;\/em&gt;, please ignore&lt;\/h2&gt;\n&lt;!-- \/wp:heading --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<h2 class=\"[&amp;_em]:px-3 [&amp;_em]:py-0.5 [&amp;_em]:mr-1.5 lg:text-5xl [&amp;_em]:not-italic [&amp;_em]:rounded-3xl [&amp;_em]:ring-2 wp-block-heading\">Test <em>heading<\/em>, please ignore<\/h2>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:heading {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[\\u0026_em]:px-3 [\\u0026_em]:py-0.5 [\\u0026_em]:mr-1.5 lg:text-5xl [\\u0026_em]:not-italic [\\u0026_em]:rounded-3xl [\\u0026_em]:ring-2&quot;,&quot;css&quot;:&quot;.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:px-3 em{padding-inline:var(--spacing-3)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:py-0\\u005c.5 em{padding-block:var(--spacing-0_5)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:mr-1\\u005c.5 em{margin-right:var(--spacing-1_5)}@media (min-width:64rem){.lg\\u005c:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:not-italic em{font-style:normal}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:rounded-3xl em{border-radius:var(--radius-3xl)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:ring-2 em{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_em]&quot;:{&quot;skaBlocksFontStyle&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;not-italic&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;3&quot;,&quot;y&quot;:&quot;0.5&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;3xl&quot;}}},&quot;skaBlocksRingWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2&quot;,&quot;i&quot;:&quot;&quot;}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;1.5&quot;}},&quot;t&quot;:&quot;sides&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;lg&quot;:{&quot;@&quot;:&quot;5xl&quot;}}}} --&gt;\n&lt;h2 class=&quot;[&amp;_em]:px-3 [&amp;_em]:py-0.5 [&amp;_em]:mr-1.5 lg:text-5xl [&amp;_em]:not-italic [&amp;_em]:rounded-3xl [&amp;_em]:ring-2 wp-block-heading&quot;&gt;Test &lt;em&gt;heading&lt;\/em&gt;, please ignore&lt;\/h2&gt;\n&lt;!-- \/wp:heading --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<h2 class=\"[&amp;_em]:isolate [&amp;_em]:relative [&amp;_em]:after:absolute [&amp;_em]:after:inset-0 [&amp;_em]:after:-z-1 [&amp;_em]:px-5 [&amp;_em]:py-1 [&amp;_em]:mr-1.5 [&amp;_em]:after:size-full lg:text-5xl [&amp;_em]:not-italic [&amp;_em]:text-white [&amp;_em]:after:bg-primary [&amp;_em]:after:skew-3 wp-block-heading\">Test <em>heading<\/em>, please ignore<\/h2>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:heading {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[\\u0026_em]:isolate [\\u0026_em]:relative [\\u0026_em]:after:absolute [\\u0026_em]:after:inset-0 [\\u0026_em]:after:-z-1 [\\u0026_em]:px-5 [\\u0026_em]:py-1 [\\u0026_em]:mr-1.5 [\\u0026_em]:after:size-full lg:text-5xl [\\u0026_em]:not-italic [\\u0026_em]:text-white [\\u0026_em]:after:bg-primary [\\u0026_em]:after:skew-3&quot;,&quot;css&quot;:&quot;.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:isolate em{isolation:isolate}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:relative em{position:relative}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:after\\u005c:absolute em:after{content:var(--tw-content);position:absolute}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:after\\u005c:inset-0 em:after{content:var(--tw-content);inset:var(--spacing-0)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:after\\u005c:-z-1 em:after{content:var(--tw-content);z-index:calc(1*-1)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:px-5 em{padding-inline:var(--spacing-5)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:py-1 em{padding-block:var(--spacing-1)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:mr-1\\u005c.5 em{margin-right:var(--spacing-1_5)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:after\\u005c:size-full em:after{content:var(--tw-content);width:100%;height:100%}@media (min-width:64rem){.lg\\u005c:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:not-italic em{font-style:normal}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:text-white em{color:var(--color-white)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:after\\u005c:bg-primary em:after{content:var(--tw-content);background-color:var(--color-primary)}.\\u005c[\\u005c\\u0026_em\\u005c]\\u005c:after\\u005c:skew-3 em:after{content:var(--tw-content);--tw-skew-x:skewX(3deg);--tw-skew-y:skewY(3deg);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_em]&quot;:{&quot;skaBlocksFontStyle&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;not-italic&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;white&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;5&quot;,&quot;y&quot;:&quot;1&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;1.5&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksSelectors&quot;:{&quot;after&quot;:{&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute&quot;}}},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;i&quot;:&quot;0&quot;}},&quot;t&quot;:&quot;inset&quot;},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;primary&quot;}}},&quot;skaBlocksSkew&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;3&quot;}}},&quot;skaBlocksZIndex&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;-1&quot;}}}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksIsolation&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;isolate&quot;}}}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;lg&quot;:{&quot;@&quot;:&quot;5xl&quot;}}}} --&gt;\n&lt;h2 class=&quot;[&amp;_em]:isolate [&amp;_em]:relative [&amp;_em]:after:absolute [&amp;_em]:after:inset-0 [&amp;_em]:after:-z-1 [&amp;_em]:px-5 [&amp;_em]:py-1 [&amp;_em]:mr-1.5 [&amp;_em]:after:size-full lg:text-5xl [&amp;_em]:not-italic [&amp;_em]:text-white [&amp;_em]:after:bg-primary [&amp;_em]:after:skew-3 wp-block-heading&quot;&gt;Test &lt;em&gt;heading&lt;\/em&gt;, please ignore&lt;\/h2&gt;\n&lt;!-- \/wp:heading --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Most WordPress blocks allow to enter rich text, which means you can make selected text bold, italic, add links or even inline images. This functionality can be leveraged to style parts of the text with Tailwind classes. Select some text and make it italic with the rich text formatting controls which appear on the right&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-38","post","type-post","status-publish","format-standard","hentry","category-ska-blocks"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":5,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":556,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/38\/revisions\/556"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}