Introduction
💡

Note: We build and release components gradually. Consequently, some components may not be available!

Introduction

Tailwind You is a beautiful component library that combines the power of Tailwind CSS (opens in a new tab) with Google's new Material You (opens in a new tab)(Material 3) design principles for creating beautiful and personalized user interfaces for the web. With a wide range of pre-built components, Tailwind You makes it easy to create beautiful and functional user interfaces that are tailored to your users' preferences.

Documentation

In this documentation, you will learn how to use @tailwind-you/react and @tailwind-you/vue components and how you can integrate it in your own projects. This library is meant to help you biuld your frontend based on Material You design guidlines using Tailwind CSS - Installing Tailwind CSS (opens in a new tab)

Tailwind You uses Tailwind CSS classes, thus you must install Tailwind CSS on your project in order for it to work properly. Preferably, Tailwindcss 3.x.x

Installation

To get started with tailwind-you and have it setup in your project is as simply as copy pasting the following code into your terminal:

🛠Setup (Vue ^3.x)

Like we mentioned ealier, tailwind-you uses tailwind 3.x.x under the hood, hence this doesn't require you to install tailwind any longer.

npm install @tailwind-you/vue

Import

import tailwindYou from "@tailwind-you/vue"; // import library
import "@tailwind-you/vue/dist/index.css"; // import styles

Usage

<u-badge size="large" label="32" />

Done✨

That's it, no other action is required, follow the doc and browse the components you would like to use.