alexandredev3/tails-ui

A Design System for TailwindCSS projects

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