Documentation

What version of Tailwind CSS is used?

The components are built using Tailwind CSS version 3.4.0 and I strive to keep the version of Tailwind CSS up-to-date in order to take advantage of the latest features and improvements.

How do I use AlpineJS in my project?

To use AlpineJS in your project, you can include it via the CDN method:

<html>
  <head>
    ...
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
  </head>
  ...
</html>

For more information, please refer to the official installation page.

Which font are you using in the components?

I have used Inter font family for the components for its professional and polished appearance. If you'd like to use Inter in your own project, you can include it via the CDN method:

<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

Then add the "Inter var" font family to your "sans" font family like so:

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
 
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
      // ...
    },
    // ...
  },
  // ...
};

Why do I not see the same result when I copy and paste the component code into my website as in the preview on the documentation page?

The preview of the component on the documentation page includes a container element like:

<div class="flex justify-center p-6">
  <!-- ... -->
</div>

which is used for preview purposes only and is not included in the code snippet. This container element may be affecting the styling and layout of the component, so you may not see the same result when you use the plain code without the container.

To get the same result as the preview on the documentation page, you can try adding the container element to your code, or you can adjust the styling and layout of the component to fit your own needs.