Visually create and edit Tailwind CSS UIs 10x faster using AI.

Tail-kit is a fully coded components KIT for Tailwind css 3.0. All components are free and open source and can be used in React, Angular or VueJS applications.

Installation

Tail-Kit is based on Tailwind CSS framework .

You need to install the library to take the full advantage of tail-kit.

Link to install Tailwind CSS : Documentation

Once Tailwind CSS is installed, you can get started!

🧩 See components 🎨 See templates

Configuration

Some Tail-Kit components need to override basic Tailwind configuration to work.

All components that need configuration are indicated with this sign:Need configuration

For more information about Tailwind configuration: Documentation

The necessary configuration for all Tail-Kit components (tailwind.config.js file) are available below:

module.exports = {
  important: true,
  // Active dark mode on class basis
  darkMode: "class",
  i18n: {
    locales: ["en-US"],
    defaultLocale: "en-US",
  },
  purge: {
    content: ["./pages/**/*.tsx", "./components/**/*.tsx"],
    // These options are passed through directly to PurgeCSS
  },
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        check: "url('/icons/check.svg')",
        landscape: "url('/images/landscape/2.jpg')",
      }),
    },
  },
  variants: {
    extend: {
      backgroundColor: ["checked"],
      borderColor: ["checked"],
      inset: ["checked"],
      zIndex: ["hover", "active"],
    },
  },
  plugins: [],
  future: {
    purgeLayersByDefault: true,
  },
};

module.exports = {
  important: true,
  // Active dark mode on class basis
  darkMode: "class",
  i18n: {
    locales: ["en-US"],
    defaultLocale: "en-US",
  },
  purge: {
    content: ["./pages/**/*.tsx", "./components/**/*.tsx"],
    // These options are passed through directly to PurgeCSS
  },
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        check: "url('/icons/check.svg')",
        landscape: "url('/images/landscape/2.jpg')",
      }),
    },
  },
  variants: {
    extend: {
      backgroundColor: ["checked"],
      borderColor: ["checked"],
      inset: ["checked"],
      zIndex: ["hover", "active"],
    },
  },
  plugins: [],
  future: {
    purgeLayersByDefault: true,
  },
};