Radiant

Radiant is a Tailwind Plus site template built using Tailwind CSS and Next.js, with a blog powered by Sanity.

Prerequisites

• Node.js 18.17 or later
• npm 9.0.0 or later

Getting started

To get started with this template, first install the npm dependencies:

npm install

For optimal compatibility, you may need to install specific versions of the dependencies:

npm install next@14.2.0 --legacy-peer-deps
npm install -D tailwindcss@3.3.3 postcss@8.4.31 autoprefixer@10.4.16 --legacy-peer-deps

Setting up Sanity

Next, create a new Sanity project to power the blog within this template:

npm create sanity@latest -- --env=.env.local --create-project "Radiant Blog" --dataset production

This will prompt you to create a new Sanity account if you don't have one already. When asked "Would you like to add configuration files for a Sanity project in this Next.js folder?", choose "n".

Environment Variables

After setting up Sanity, ensure your .env.local file contains the necessary environment variables:

NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_READ_TOKEN=your_api_token

Demo Content (Optional)

To import the demo seed data for the blog:

npx sanity@latest dataset import seed.tar.gz

Development

To start the development server:

npm run dev

This will start:

• Next.js frontend at http://localhost:3000
• Sanity Studio at http://localhost:3000/studio

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run typegen - Generate Sanity schema types

Project Structure

├── public/          # Static assets
├── src/
│   ├── app/         # Next.js app router pages
│   ├── components/  # React components
│   ├── sanity/      # Sanity configuration and schemas
│   └── styles/      # Global styles
└── sanity.config.ts # Sanity configuration

Customizing

You can start editing this template by modifying the files in the /src folder. The site will auto-update as you edit these files.

Key Files for Customization

• src/app/layout.tsx - Main layout component
• src/app/page.tsx - Homepage
• src/styles/tailwind.css - Global styles
• src/sanity/schema.ts - Sanity content schema

License

This site template is a commercial product and is licensed under the Tailwind Plus license.

Learn more

To learn more about the technologies used in this site template, see the following resources:

• Tailwind CSS - the official Tailwind CSS documentation
• Next.js - the official Next.js documentation
• Headless UI - the official Headless UI documentation
• Sanity - the Sanity website

Troubleshooting

Common Issues

1. If you encounter EACCES permission errors during installation:

   npm install --legacy-peer-deps
   

2. If you see TypeScript errors after installation:

   npm run typegen
   

3. For Sanity Studio connection issues, verify your environment variables and ensure you're logged in:

   npx sanity login
   

4. If you encounter Tailwind CSS compilation issues:

   • Ensure you have the correct versions of dependencies installed
   • Check that postcss.config.js and tailwind.config.js are properly configured
   • Try clearing the Next.js cache: rm -rf .next and restart the development server