Styles guide

Default styling guide

This styles guide shows all the basic styles of the elements applied by the theme:

All the elements support Tailwind CSS for styling^* and dark mode can be set like shown in the minimal example below with the dark: prefix for any class.

Theme’s native WordPress custom CSS field and Tailwind CSS are supported can be applied, as explained. For fonts configuration see full site editing article.

<h2 class="bg-pink-400 text-white dark:text-black dark:bg--100">Tailwind styling example</h2>

This will result in a styled heading with dark mode support. Nice one!

^*Have in mind that the classes need to be present first in the frontend for them to work, as the post-css plugin removes the unused classes during build time and they won’t be working.

Tailwind styling example

You can find the complete Tailwind CSS documentation here. It gives You an incredible flexibility in terms of customisation and gives You also nice publishing features to apply the classes via the Advanced Gutenberg metabox.

1. Headings h1 – h6

A quick brown fox jumps over the fence

A quick brown fox jumps over the fence

A quick brown fox jumps over the fence

A quick brown fox jumps over the fence

A quick brown fox jumps over the fence

A quick brown fox jumps over the fence

1. Paragraphs & Text Elements

Paragraph (<p>)

<p>This is a standard paragraph with optimized readability and proper spacing.</p>

---

Emphasized Text

✅ Bold (<b> / <strong>)

<strong>Important information should stand out with strong text.</strong>

✅ Italic (<i> / <em>)

<em>Emphasized text can be italicized for readability.</em>

✅ Underline (<u>)

<u>Underlined text can indicate links or important information.</u>

---

Blockquotes (<blockquote>)

<blockquote>“A well-styled quote enhances readability and impact.”</blockquote>

---

2. Lists

List markers are hidden by default for customisation possibility.

Unordered List (<ul>)

• Item 1
• Item 2
• Item 3

<ul>
  <li>Easy to read bullet points</li>
  <li>Consistent spacing between items</li>
</ul>

Ordered List (<ol>)

• Item 1
• Item 2
• Item 3

<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

---

3. Links & Buttons

Links (<a>)

<a href="#" class="dark:text-pink-400">This is a styled link</a>

This is a styled link with margin top and dark color.

---

Buttons

Basic WP button

---

4. Forms & Inputs

Input Fields (<input>)

<input type="text" placeholder="Enter your text">

Can be further developed with tailwind classes to get this results for example:

<input class="mt-1 block text-gray-700 dark:text-gray-200  w-full p-2 border rounded-md dark:bg-gray-700 dark:border-gray-600" type="text" placeholder="example input">

---

Textareas (<textarea>)

<textarea placeholder="Write something..."></textarea>

Same goes for other elements.

---

5. Tables (<table>)

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

---

6. Code & Preformatted Text

Inline Code (<code>)

<p>This is <code>inline code</code> in a sentence.</p>

---

Code Block (<pre>)

<pre>
const hello = "Hello World!";
console.log(hello);
</pre>

---

7. Miscellaneous Elements

Horizontal Rule (<hr>)

<hr>