DEV Community

loading...

Nextjs TailwindCSS Typescript Starter

vuongddang profile image Vuong Dang Updated on ・2 min read

I had a chance to integrate TailwindCSS into our existing AngularJS (Bootstrap) app and use it for developing new features. Even though it is hard for the migration, It is incredibly rewarding (Also for migrating Gulp to Webpack and start using TypeScript 😌)

Today I'm checking out Next.js by setting up a starter template with Nextjs, TailwindCSS and Typescript.

Source code for the template can be found here Github.

Create new next.js app

Run the following command in your Terminal and follow the wizard. As a result, a new directory containing the app will be created for you.

npx create-next-app
Enter fullscreen mode Exit fullscreen mode

Start the app

Run the development server and Open http://localhost:3000 with your browser to see the result.

npm run dev
Enter fullscreen mode Exit fullscreen mode

Create src directory and move pages into src (Optional)

The src directory is very common in many apps and Next.js supports it by default.

cd <your-app-directory>
mkdir src
mv pages src
Enter fullscreen mode Exit fullscreen mode

Support TypeScript

Next.js supports TypeScript out of the box. More info here

touch tsconfig.json
npm i -D typescript @types/react @types/node
Enter fullscreen mode Exit fullscreen mode

Restart development server by running npm run dev, you will see this in the console:
We detected TypeScript in your project and created a tsconfig.json file for you.

Test TypeScript support by renaming index.js to index.tsx and restart development server

mv src/pages/index.js src/pages/index.tsx
Enter fullscreen mode Exit fullscreen mode

Integrate TailwindCSS

Install TailwindCSS, postcss and PurgeCSS. More information can be found in the official TailwindCSS documentation. Installation, Optimizing for Production

npm i -D tailwindcss postcss-import autoprefixer
Enter fullscreen mode Exit fullscreen mode

Configure PostCSS

Create postcss.config.js

touch postcss.config.js
Enter fullscreen mode Exit fullscreen mode
module.exports = {
  plugins: [
    'tailwindcss',
    'autoprefixer',
  ]
}
Enter fullscreen mode Exit fullscreen mode

Configure PurgeCSS for production build

Create tailwind.config.js to enable PurgeCSS and customize your tailwind. By default, Tailwind will only remove unused classes that it generates itself. That means the unused styles from your custom CSS or from third-party CSS will not be removed. More info can be found here Optimizing for Production

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode
module.exports = {
  purge: ['./src/components/**/*.{ts,tsx,js,jsx}', './src/pages/**/*.{ts,tsx,js,jsx}'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Add TailwindCSS to your css

Create src/styles/index.css.

mkdir src/styles && touch src/styles/index.css
Enter fullscreen mode Exit fullscreen mode
@import 'tailwindcss/base';
@import 'tailwindcss/components';

/* Your own custom component styles */

@import 'tailwindcss/utilities';
Enter fullscreen mode Exit fullscreen mode

Create a src/pages/_app.tsx file Then add styles/index.css to your application by import the CSS file.

touch src/pages/_app.tsx
Enter fullscreen mode Exit fullscreen mode
import { AppProps } from 'next/app'
import '../styles/index.css'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp
Enter fullscreen mode Exit fullscreen mode

Enjoy the power of Next.js TailwindCSS and TypeScript😍

Discussion (6)

pic
Editor guide
Collapse
akshay090 profile image
Akshay090

thanks for writing this post. I've the question that don't we need a script tag in package.json to build tailwind ?

Collapse
vuongddang profile image
Vuong Dang Author

Next.js compiles CSS using PostCSS out of the box. So we just have to customize postcss.config.js to include tailwindcss plugin. More info can be found here.

Hope that helps!

Collapse
vuongddang profile image
Vuong Dang Author

if we integrate TailwindCSS to a project create with Create React App Blog post by Christopher, then we might need to install postcss-cli and create a script tag to run postcss ourself.

Collapse
akshay090 profile image
Akshay090

That's really cool.

Collapse
sanderdebr profile image
sanderdebr

Works like a charm, thanks!

Collapse
vuongddang profile image
Vuong Dang Author

You're welcome. I'm glad it helped!