Setting up Next.js with Tailwind

Published
Last updated
Share this post on BlueskySee discussion on Bluesky
🧙 This post may be stale!

This post hasn't been updated in the past 6 months, some of the content could be a bit out of date!

I've started to use Tailwind with my personal projects as a replacement for Vanilla Extract, and I've found myself copying my tailwind settings/setup across a few different projects as I'm refreshing their setups.

Since I often need to jump back into the Tailwind docs and find their Next.js setup instructions I figured I'd share my settings here (some of which might be opinionated), which should make it easier to run this process in different projects.

1. Install Dependencies:

1yarn add tailwindcss postcss autoprefixer daisyui @ds-pack/daisyui
1yarn add tailwindcss postcss autoprefixer daisyui @ds-pack/daisyui

2. Setup Tailwind Config:

Create the following tailwind.config.js file:

1let path = require('path');
2
3module.exports = {
4  content: [
5    './app/**/*.tsx',
6    './lib/**/*.tsx',
7    './ui/**/*.tsx',
8    path.join(
9      path.dirname(require.resolve('@ds-pack/daisyui')),
10      '/**/*.js',
11    ),
12  ],
13  plugins: [require('@tailwindcss/typography'), require('daisyui')],
14  daisyui: {
15    logs: false,
16  },
17};
1let path = require('path');
2
3module.exports = {
4  content: [
5    './app/**/*.tsx',
6    './lib/**/*.tsx',
7    './ui/**/*.tsx',
8    path.join(
9      path.dirname(require.resolve('@ds-pack/daisyui')),
10      '/**/*.js',
11    ),
12  ],
13  plugins: [require('@tailwindcss/typography'), require('daisyui')],
14  daisyui: {
15    logs: false,
16  },
17};

3. Run the Tailwind Setup Script:

1yarn dlx tailwindcss init -p
1yarn dlx tailwindcss init -p

4. Configre Base Styles

Create a new globals.css file within the styles/ directory with the below content:

1@tailwind base;
2@tailwind components;
3@tailwind utilities;
1@tailwind base;
2@tailwind components;
3@tailwind utilities;

and then import that in your root layout.tsx file:

1import '@styles/globals.css';
1import '@styles/globals.css';

All Done!

With the above, the application should be setup with Tailwind, Daisyui, and @ds-pack/daisyui. I'll update my opinionated Next.js setup blog post with these details soon also!

Tags:

Web DevelopmentNext.jsTailwind