https://github.com/alexandredev3/tails-ui

A Design System for TailwindCSS projects
https://github.com/alexandredev3/tails-ui

design-system javascript plopjs reactjs storybook tailwind tailwind-css tailwindcss turborepo typescript vitejs

Last synced: 26 days ago
JSON representation

A Design System for TailwindCSS projects

• Host: GitHub
• URL: https://github.com/alexandredev3/tails-ui
• Owner: alexandredev3
• License: mit
• Created: 2022-10-14T17:35:50.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-29T14:33:17.000Z (almost 2 years ago)
• Last Synced: 2024-09-29T10:46:30.200Z (about 1 month ago)
• Topics: design-system, javascript, plopjs, reactjs, storybook, tailwind, tailwind-css, tailwindcss, turborepo, typescript, vitejs
• Language: TypeScript
• Homepage: https://tails-ui-playground.vercel.app
• Size: 2.79 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        


  

    

      

      

      

    

  





  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.

```bash

$ npm install -D tailwindcss

$ npx tailwindcss init

```

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

```bash

$ npm install -D @tails-ui/plugin 

```

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

```bash

$ 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.

```cjs

/** @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.

```cjs

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: [

    "./node_modules/@tails-ui/**/*.js"

  ],

}

```

6. Now you can start to use the components!

```tsx

function Example() {

  return (

    

      


        

          

        

        

          Accept terms & conditions

        

      

    

  );

}

```

## Contributing