Using Tailwind.css with Next.js

I've been using tailwind.css with next.js projects for months now. However I realized that i've been bootstrapping these projects all wrong. I'd google next.js tailwind.css then read a tutorial about running a bunch of different commands generating a bunch of files to get up and running with an index page using tailwind.css.

Turns out there's an easier way. Just run npm init next-app <appname> --example with-tailwindcss

~/temp
⟩ npm init next-app whoam --example with-tailwindcss
npx: installed 1 in 1.198s
Creating a new Next.js app in /Users/thomasmillar/code/whoami.

Downloading files for example with-tailwindcss. This might take a moment.

Installing packages. This might take a couple of minutes.


> fsevents@1.2.13 install /Users/thomasmillar/code/whoami/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> @ampproject/toolbox-optimizer@2.6.0 postinstall /Users/thomasmillar/code/whoami/node_modules/@ampproject/toolbox-optimizer
> node lib/warmup.js

AMP OPTIMIZER Downloaded latest AMP runtime data.
added 773 packages from 317 contributors and audited 773 packages in 32.774s

34 packages are looking for funding
  run `npm fund` for details

found 5 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Initialized a git repository.

Success! Created whoami at /Users/thomasmillar/code/whoami
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd whoami
  npm run dev

This method will ensure you have the latest configurations suggested by the tailwind team with Next.js.

thmsmlr