Nextjs13 With Antd Tailwindcss

Next.js13 app dir with Antd 5 & tailwindcss

#ant-design #antd #nextjs #nextjs13 #tailwindcss #tailwind #intl

Using Ant-Design 5 with Next.js 13 and Tailwind CSS

Antd is is an excellent UI component library, but there are some conflicts between the antdV5 and Next.js 13. This repository solved these problems, and you can use the template to start your project.

Features

Next.js 13 app directory
Ant-Design 5
Tailwind CSS
Automatic import sorting with @trivago/prettier-plugin-sort-imports
Dark mode with next-themes
Icons from Lucide
Globalization with next-intl

Problems and solutions

Here are some problems and solutions I encountered when I started the project

Server side rendering and CSS-in-JS antd5 https://github.com/vercel/next.js/issues/44125#issuecomment-1372270391
Distinguish client/server components when using Next.js 13 app directory https://beta.nextjs.org/docs/rendering/server-and-client-components
Priority conflict of css style when using Ant-Design 5 and Tailwind CSS https://github.com/ant-design/ant-design/issues/38794#issuecomment-1328262525
DatePicker component internationalization has not taken effect https://github.com/ant-design/ant-design/issues/27276#issuecomment-1281799701

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce