Setup Guide

Adding Tailwind CSS

Firstly start by adding Tailwind CSS to your projects, keep in mind we have to modify the tailwind config at a later point.

Adding Tailwind plugins

Some of the component relay on container queries, therefore you need to add it into your project.

Installation

# Incase you use NPM
npm install @tailwindcss/container-queries

Installing Additional Dependencies

You can avoid installing additional packages by modifying the component codes. The needed packages are as listed below:

Installation

# Incase you use NPM
npm install class-variance-authority tailwind-merge

Modifying Tailwind config

We need to add the following to the tailwind.config.js file at the root of the project:

const colors = require("tailwindcss/colors");

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    extend: {
      keyframes: {
        "opacity-keyframes": {
          "0%": {
            opacity: 0,
          },
          "100%": {
            opacity: 1,
          },
        },
        "loading-keyframes": {
          from: {
            opacity: 0.5,
          },
          to: {
            opacity: 1,
          },
        },
      },
      animation: {
        "fade-in": "opacity-keyframes .5s ease-in-out forwards",
        loading: "loading-keyframes steps(4) infinite",
      },
      colors: {
        primary: colors.violet, // <- You can change the primary color to your own preferred color //
      },
      screens: {
        standalone: {
          raw: "(display-mode: standalone)",
        },
        "iphone-portrait": {
          raw: `
            (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), 
            (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), 
            (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), 
            (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), 
            (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)
          `,
        },
      },
    },
  },
  plugins: [require("@tailwindcss/container-queries")],
};

Adding global stylings

Add the following line to your global CSS file

*,
*::after,
*::before {
  -webkit-tap-highlight-color: transparent;
  @apply accent-primary-500/60 dark:accent-primary-300/60 outline-primary-500/60 dark:outline-primary-300/60;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }
}

html[data-modal-open="true"] * {
  touch-action: none;
}
html[data-modal-open="true"]
  [data-dialog-open="true"]
  [data-scrollable="true"]
  * {
  touch-action: auto;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  @apply appearance-none m-0;
}

Loading...