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.