Getting started

Taily UI can be included as a plugin into an existing Tailwind CSS project and it is supposed to help you build websites faster by having a set of web components to work with built with the utility classes from Tailwind CSS.

Install using NPM

Make sure that you have Node.js and Tailwind CSS installed.

1. Install Taily UI as a dependency using NPM by running the following command:

npm install taily-ui

2.A. Require Taily UI as a plugin inside the tailwind.config.js file:

const { tailyUI } = require('taily-ui')

module.exports = {
    plugins: [tailyUI]
}

2.B. Or if you work with Typescript import Taily UI as a plugin inside the tailwind.config.ts file:

import type { Config } from 'tailwindcss'
import { tailyUI } from 'taily-ui'

const config: Config = {
    plugins: [tailyUI]
}
export default config

Data attributes

The preferred way to use the interactive UI components from Taily UI is via the data attributes interface which allows us to add functionality via the HTML element attributes and most of the examples on our documentation applies this strategy.

For example, to set up a button component all you need to do is use data-color, data-type and data-size to setup color, type and size of the component.

<button data-color="default" data-type="solid" data-size="medium" class="button">
    Start using Taily UI
</button>

Components

Taily UI is an open source collection of UI components built with the utility classes from Tailwind CSS that you can use as a starting point when coding user interfaces and websites.