What is drump UI?

DrumpUI are free open source components.
A collection of free Tailwind CSS Components that can be used in all your projects.

Installation

All you need to use these components is to have Tailwind CSS installed in your React project.

Install Tailwind CSS with Nextjs

We recommend that you use Nextjs to create projects as Tailwind CSS is easier to install.
We leave you the documentation and the remote control to place in the terminal.

> npx create-next-app@latest

It is important that in this option Would you liketo use TypeScript? No / Yes
put that if so that Tailwind CSS is installed correctly and can use DrumpUI.

1 What is your project named? my-app
2 Would you liketo use TypeScript? No / Yes 
3 Would you like to use ESLint? No / Yes
4 Would you like to use Tailwind CSS? No / Yes
5 use "src/" directory? No / Yes
6 Router? (recommended) No / Yes
7 default import alias? No / Yes

Install Tailwind CSS with Vite

Start by creating a new Vite project if you don’t have one set up already.
The most common approach is to use Create Vite.

> npm create vite@latest my-project -- --template react
> cd my-project

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js
and postcss.config.js files.

> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p

Configure your template paths.
Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */ 
export default { 
    content: [ 
        "./index.html", 
        "./src/**/*.{js,ts,jsx,tsx}", 
    ], 
    theme: { 
    extend: ,
    },
    plugins: [],
},

Add the Tailwind directives to your CSS.
Add the @tailwind directives for each of Tailwind’s layers to your ./src/globales.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Start your build process.
Run your build process with npm run dev.

> npm run dev

Start using Tailwind in your project.
Start using Tailwind’s utility classes to style your content.

export default function App() {
    return (
        <h1 className="text-3xl font-bold underline">
            Hello world!
        </h1>
    )
}