Setting up Next.js with TailwindPublished See discussion on Twitter
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:
2. Setup Tailwind Config:
Create the following
3. Run the Tailwind Setup Script:
4. Configre Base Styles
Create a new
globals.css file within the
styles/ directory with the below
and then import that in your root