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
With the above, the application should be setup with Tailwind,
I'll update my opinionated Next.js setup blog post with these details soon also!