Styling

The Starter Kit comes with Tailwind CSS, which is a highly customizable utility-first CSS framework. For more information on the framework we recommend you take a look at the docs. You can easily create your own theme by changing the values at /client/tailwind.config.js. You can find out more about customisation options here.

global.css

The Tailwind components are injected into the /client/styles/global.css file, which is required in the /client/pages/_app.tsx file in order to be applied globally in your application.

If you run npm run dev Next.js will do some magic under the hood and get your CSS compiled without any further configuration.

Optimizing for production

In development environment the Tailwind CSS file is quite large by design. Thus, when building for productions, you might want to consider optimizing the bundle size of your /client/styles/global.css by using Tailwinds built-in purge option, which has to be configured in the /client/tailwind.config.js file. Find out more about this feature here.