Setting up Next.js with Tailwind

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

Share this post on Bluesky See 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

let path = require('path');

module.exports = {
  content: [
    './app/**/*.tsx',
    './lib/**/*.tsx',
    './ui/**/*.tsx',
    path.join(
      path.dirname(require.resolve('@ds-pack/daisyui')),
      '/**/*.js

yarn dlx tailwindcss init -p

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

import '@styles/globals.css';

Setting up Next.js with Tailwind

1. Install Dependencies:

Setting up Next.js with Tailwind

1. Install Dependencies:

2. Setup Tailwind Config:

3. Run the Tailwind Setup Script:

4. Configre Base Styles

All Done!

Tags:

Related Posts

Web Development

Related Posts

Web Development

Next.js