Hey Folks,
First post and i don't like long intros, so mine will be short. Searched for next.js and tailwindcss templates, found a lot, some outdated, some without purging, some too much boilerplate stuff, etc.
So i created my own and here it is:
andybroger
/
nextjs-tailwindcss
nextjs + tailwindcss template
nextjs-tailwindcss template
next.js template including tailwindcss, check out the jsx-tailwind branch if you need support for @apply rules in styled-jsx.
Features
- Includes Tailwindcss
- Includes postcss-preset-env
- now uses tailwindcss 1.4.x purge method on production builds
usage
- Clone this repo
- npm install
- npm run dev
notes
styles/main.css The styles/main.css files includes tailwindcss imports and also supports global styles. It is processed by postcss and with postcss-preset-env supports nesting and other cool stuff.
postcss.config.js The configuration file for postcss. The purgecss plugin is configured to scan the *.js files in the pages/ and components/ folder.
tailwind.config.js
You should know that file, its the default config generated with npx tailwindcss init. It's where your tailwindcss config goes.
pages/_app.js
Here we integrate styles/main.css into the app.
some notes
styles/main.css
The styles/main.css files includes tailwindcss imports and also supports global styles. It is processed by postcss and with postcss-preset-env supports nesting and other cool stuff.
postcss.config.js
The configuration file for postcss. The purgecss plugin is configured to scan the *.js files in the pages/ and components/ folder.
tailwind.config.js
You should know that file, its the default config generated with npx tailwindcss init. It's where your tailwindcss config goes.
pages/_app.js
Here we integrate styles/main.css into the app.
Please feel free to comment, if you have any questions.
Top comments (2)
thanks this is really good stuff
Thanks, very useful