Member-only story
How to Set Up Next.js With Tailwind CSS
Use Tailwind CSS and Next.js in your React project
UPDATE: Tailwind CSS 2.0 has been released. Please follow this new guide to use the latest version of Tailwind with the latest version of Next.js: https://medium.com/better-programming/how-to-set-up-tailwind-css-v2-0-with-next-js-10-4a82c8f8caaa
If you’re starting a new React project, you might want to consider Next.js and Tailwind CSS. In this article, we will explain why this would be a great choice and walk you through the process of setting up a new project using these technologies.
Why Next.js?
There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler like webpack and transformed using a compiler like Babel. Create React App can be a nice tool to handle this for you and give you a massive head start, but what about code-splitting, pre-rendering for performance, and SEO or server-side rendering?
To build a complete React application, you need more than CRA provides you. You can save yourself some time by using Next.js, a React framework that provides a solution to all of these problems above. If you want to read more about CRA vs. Next.js, check out Stack choices: Create React App vs Next.js.
Why Tailwind CSS?
Tailwind CSS is a CSS framework, but it’s different than most other frameworks like Bootstrap, Material, or Ant Design. It’s a utility-first framework, which means it doesn’t focus on predesigned components like buttons, cards, and alerts. It provides low-level utility classes that let you build completely custom designs without leaving your HTML.
Although it requires some time to learn all the utility classes, you barely need to write any CSS anymore once you start using it. It can give you a huge boost in productivity, and not needing to switch files while styling your HTML elements can feel like a blessing.
Let’s Start
If you haven’t got a project set up with Next.js, first open your terminal and run yarn create next-app in your projects folder.
