Skip to main content

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that enables rapid UI development by providing a comprehensive set of utility classes. It allows you to build custom designs directly within your HTML markup, making it incredibly versatile and efficient.

For more detailed information about Tailwind CSS, visit the Tailwind CSS website (tailwindcss.com/).

Examples of Tailwind CSS in the Widget Builder​

Explore some practical examples below to see how Tailwind CSS can be used to create simple and effective widgets in the Widget Builder.

You can copy and paste the code snippets to directly use them in the Widget Builder. Therefore you just need to paste the example code into the HTML editor of the Widget Builder in the Layout tab and adjust it to your needs.

Example 1: Responsive Layout​

<div class="flex justify-center items-center h-32 bg-gray-200">
  <p class="text-xl text-blue-500">Hello, World!</p>
</div>

Example 2: Button Styles​

<button
  class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
>
  Click Me
</button>

Example 3: Card Component​

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-blue-100 m-4">
  <img
    class="w-full block"
    src="https://docs.widgetbuilder.de/img/wb-home.png"
    alt="Card Image"
  />
  <div class="px-6 py-4 border-x-0 border-y-4 border-solid border-white/25">
    <div class="font-bold text-xl mb-2">Card Title</div>
    <p class="text-gray-700 text-base">
      This is the content of the card. Replace it with your own text or
      components.
    </p>
  </div>
</div>

Example 4: Responsive Grid​

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4">1</div>
  <div class="bg-green-200 p-4">2</div>
  <div class="bg-yellow-200 p-4">3</div>
  <div class="bg-purple-200 p-4">4</div>
  <div class="bg-red-200 p-4">5</div>
</div>

Example 5: Alert Message​

<div
  class="bg-yellow-100 border-solid border-t-0 border-r-0 border-l-4 border-b-0 border-yellow-500 text-yellow-700 px-4 py-1 rounded-r-lg m-4"
  role="alert"
>
  <p class="font-bold">Warning!</p>
  <p>There was an issue with your submission.</p>
</div>

Next Steps​

These examples showcase how Tailwind CSS classes can be directly applied within your widget's HTML to achieve responsive layouts, styled buttons, card components, responsive grids and alert messages. Experiment with these examples to customize and enhance your widgets effortlessly.

To better understand the Tailwind CSS utility classes used in the examples, refer to the Tailwind CSS documentation (tailwindcss.com/docs/). You might have a look into the core concepts by starting with the Utility-First Fundamentals (https://tailwindcss.com/docs/utility-first) section.

tip

Also a good resource is the Tailwind CSS Cheat Sheet (nerdcave.com/tailwind-cheat-sheet).

Helpful Tips​

Use custom CSS classes​

You can also define your own CSS classes to further customize the appearance of your widgets. Simply add a <style> tag within the HTML editor of the Widget Builder and define your custom CSS classes.

<style>
  .my-class {
    padding: 8px;
    margin: 12px;
    border: 1px solid red;
    text-align: center;
  }
</style>

<div class="my-class">Custom CSS Class</div>

Prevent auto-preview on images​

To prevent images from automatically opening in fullscreen preview mode when clicked, add the no-fullscreen-preview class to the image element.

<img class="no-fullscreen-preview" src="..." />