Tails Ui

A Design System for TailwindCSS

Documentation

To see all the available components and usages, visit alexandredev3.github.io/tails-ui.com

Visit https://tails-ui-playground.vercel.app/ to play around with the demo.

Usage

Follow these steps to start using the components:

1. Install TailwindCSS in your existing React project.

   $ npm install -D tailwindcss
   $ npx tailwindcss init
   

2. Install the Tails UI Tailwind plugin as a dev dependency on your project.

   $ npm install -D @tails-ui/plugin 
   

3. Install the components that you want to use in your project.

   $ npm install @tails-ui/checkbox @tails-ui/button
   

   Tails UI allows you to download only those components that you really need in your project.

4. Add the Tails UI plugin to your project tailwind.config.js file.

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     plugins: [require('@tails-ui/plugin')]
   }
   

5. Add the Tails UI components template path to your tailwind.config.js file.

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
    "./node_modules/@tails-ui/**/*.js"
     ],
   }
   

6. Now you can start to use the components!

   function Example() {
     return (
    <main>
      <div className="flex items-center gap-2">
        <Checkbox
          id="terms"
          name="terms"
        >
          <Checkbox.Icon />
        </Checkbox>
        <Label
          className="text-sm"
          htmlFor="terms"
        >
          Accept terms & conditions
        </Label>
      </div>
    </main>
     );
   }
   

   Contributing