Repository files navigation

A Design System for TailwindCSS

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

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

Follow these steps to start using the components:

1. InstallTailwindCSS 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 projecttailwind.config.js file.

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

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

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

6. Now you can start to use the components!

functionExample(){return(<main><divclassName="flex items-center gap-2"><Checkboxid="terms"name="terms"><Checkbox.Icon/></Checkbox><LabelclassName="text-sm"htmlFor="terms">          Accept terms&conditions</Label></div></main>);}