Logo

Tailwind Installation

PrebuiltUI uses Tailwind CSS for styling. Follow these steps to install Tailwind and configure it for your project.

Ask ChatGPT

Installing Tailwind (PostCSS)

Open a terminal at your project root and run:

bash
1npm install tailwindcss @tailwindcss/postcss postcss

This installs Tailwind CSS along with PostCSS & Autoprefixer, and creates default tailwind.config.js and postcss.config.js in your project.


Add PostCSS configuration

Add @tailwindcss/postcss to your postcss.config.mjs file, or wherever PostCSS is configured in your project.

js
1export default {
2 plugins: {
3 "@tailwindcss/postcss": {},
4 }
5}

Then add the Tailwind directives to your global CSS (or equivalent) file:

css
1@import "tailwindcss";

Run your project to see the changes.

bash
1npm run dev

Official Docs Setup

If you are using a different framework or need advanced Tailwind setup (custom themes, plugins, TypeScript support, etc.), refer to the official Tailwind docs: Tailwind CSS Documentation

How is this guide?