How to Use Nextra with Tailwind CSS and shadcn

Name

Tison Brokenshire

Updated on 1/1/2022

If you're looking to build a sleek, modern documentation site or blog, combining Nextra with Tailwind CSS and shadcn can offer a powerful and efficient solution. In this article, we'll walk through the steps to set up your project using these tools.

Recommended way

Use template directly.

What is Nextra?

Nextra is a Next.js-based static site generator that's perfect for creating documentation sites. It provides a simple and flexible way to manage content with markdown files and supports features like syntax highlighting, custom themes, and more.

Why Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without writing CSS from scratch. Its component-based approach and extensive customization options make it a popular choice for modern web development.

Introduction to shadcn

shadcn is a simple and customizable component library that pairs well with Tailwind CSS. It provides a set of pre-designed components that you can easily integrate into your project, helping you maintain consistency and speed up development.

Getting Started

Step 1: Start with a Nextra Project

Following the official Nextra documentation, create a new Nextra project:

Step 3: Install Tailwind CSS

Follow the Tailwind CSS installation steps:

1. Install Tailwind CSS and its dependencies:

   npm install tailwindcss postcss autoprefixer

2. Create your tailwind.config.js and postcss.config.js:

   npx tailwindcss init -p

3. Configure your template paths in tailwind.config.js:

   // tailwind.config.js
   module.exports = {
       content: [
           "theme.config.js",
           "./pages/**/*.{js,ts,jsx,tsx,mdx}",
           "./components/**/*.{js,ts,jsx,tsx}",
       ],
       theme: {
           extend: {},
       },
       plugins: [],
   };

4. Include Tailwind in your CSS:

   /* styles/globals.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

Step 4: Setup shadcn Components

Setup baseUrl in for tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["./*"]
        }
    }
}

Init shadcn:

npx shadcn init

Install shadcn components, for example, button:

npx shadcn add button

You can now import and use shadcn components in your pages or components. For example:

import { Button } from "@/components/ui/button";
 
<Button>Shadcn Button</Button>;

Conclusion

By combining Nextra, Tailwind CSS, and shadcn, you can create a highly customizable and modern documentation site or blog. Each tool brings unique strengths, making this stack an excellent choice for developers looking to build fast and stylish web applications. Enjoy building your next project with this powerful setup!