nextjs13-with-antd-tailwindcss
nextjs13-with-antd-tailwindcss copied to clipboard
hongfaqiu
Next.js13 app dir with Antd 5 & tailwindcss
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
appdirectory - 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
hongfaqiu