Install Tailwind CSS

hextastudio/ui needs your support to stay running 🫶 Help us

Create Next.Js Project

bash

npx create-next-app@latest my-project --typescript --eslint
cd my-project

bash

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

Configure your template paths

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using src directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    ],

Add the Tailwind directives to your CSS

globals.css

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

Start the build process

free

bash

npm run dev

Have fun with Tailwind 🎉

index.tsx

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