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. > email@example.com 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 > @firstname.lastname@example.org 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.