Setting up Next.js with Tailwind

Published 📅: ....
Last modified 📝: ....

Share this post on BlueskySee discussion on Bluesky

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:

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

2. Setup Tailwind Config:

Create the following tailwind.config.js file:

let path = require('path');

module.exports = {
  content: [
    './app/**/*.tsx',
    './lib/**/*.tsx',
    './ui/**/*.tsx',
    path.join(
      path.dirname(require.resolve('@ds-pack/daisyui')),
      '/**/*.js',
    ),
  ],
  plugins: [require('@tailwindcss/typography'), require('daisyui')],
  daisyui: {
    logs: false,
  },
};

3. Run the Tailwind Setup Script:

yarn dlx tailwindcss init -p

4. Configre Base Styles

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

@tailwind base;
@tailwind components;
@tailwind utilities;

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

import '@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:

Loading...