Skip to content

Latest commit

 

History

History
36 lines (25 loc) · 1.14 KB

File metadata and controls

36 lines (25 loc) · 1.14 KB

nextjs-tailwindcss-typescript starter

next.js template including tailwindcss with typescript

Features

  • Includes Tailwindcss
  • Includes postcss-preset-env
  • now uses tailwindcss 1.4.x purge method on production builds
  • uses styled-components with twin.macros to play well with tailwindcss
  • stylelint for linting CSS
  • typescript-plugin-tw-template for editor support of tailwind classes

usage

  1. Clone this repo
  2. yarn install
  3. yarn dev

notes

styles/index.css The styles/index.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/index.css into the app.

VS Code

  • Comes with basic vs code config
  • Recommended extensions "Tailwind CSS Intellisense" and "stylelint"