🏖️
Chisfis - Online Booking NextJs template
DemoBuy now
  • Getting Started
  • Folder structure and organization
  • Dependencies
  • Installation
  • Custom color, fonts
  • CSS
  • Component Structure
  • How to fetch data
  • How to deploy
  • How to add metadata
  • Resources and assets
  • Support
  • Change log
    • Change log
  • How to?
    • How to Get Google Maps API Key for Free (in 5 easy steps)
    • Converting a Next.js project from TypeScript to plain JavaScript
Powered by GitBook
On this page

Was this helpful?

CSS

PreviousCustom color, fontsNextComponent Structure

Last updated 3 days ago

Was this helpful?

Add the to your

/app/styles/tailwind.css

// tailwind.css

@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: 'DM sans', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --font-sans--font-feature-settings: 'cv11';
}

//...more

You can then start writing Tailwind's utility classes in your application.

// component

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}
👍
Using Tailwind
Tailwind directives
Global Stylesheet