All Blog Posts

How To Set Up Tailwind and Typescript in Next.js IN ONE STEP

#code

January 28, 2021

1 min read

Run npx create-next-app [your-project-name] -e https://github.com/wwsalmon/next-tailwind-typescript-example.

That's it. cd into your project and get to work with Typescript and Tailwind fully set up, no extra frills included.

I made next-tailwind-typescript-example after manually setting up Typescript and Tailwind a few too many times. create-next-app, Tailwind, and Next make manual set up easier than ever, but it's still tedious to do it over and over again.

If you're curious, though, here's what the six-step manual setup looks like:

  1. Run npx create-next-app [your-project-name] to get a Next project created and packages installed and such.

  2. Install Typescript with npm i typescript @types/react @types/node. Rename all your js files to tsx ones. tsconfig.json and next-env.d.ts files will be created when you first run npm run dev or next dev, so you don't have to worry about any manual config.

  3. Install Tailwind with npm i tailwindcss postcss-preset-env -D.

  4. Create a postcss.config.js with the following contents:

    module.exports = {
        plugins: ['tailwindcss', 'postcss-preset-env'],
    } 
    
  5. Create a tailwind.config.js with the following contents:

    module.exports = {
      purge: [
        './**/*.html',
        './**/*.tsx',
      ],
      theme: {},
      variants: {},
      plugins: [],
    }
    
  6. Add the following to the top of your global.css file:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    

Now get cracking away at whatever you're building!

I like to strip out create-next-app's default contents as well, i.e. deleting Home.module.css, deleting the contents of public and pages/api, and clearing the contents of index.js and global.css. I also add a _document.tsx file to make it easy to link Google Fonts, for example. All of these configurations are made in my example repo.

Contact me

Have a question about my work? Want to work together? Don't hesitate to reach out!

Email me at hello@samsonzhang.com, or message me on Twitter @wwsalmon.