Using Tailwind CSS + Next.js + TypeScript Like a Pro — Integration?

TNT : Tailwind CSS + Next.js + TypeScript, Let us call it TNT stack, here.

If you are already a Pro to integrate Tailwind CSS in Next.js with TypeScript, you can skip it and plz read this blog.

Why Next.js?

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config is needed.

You can use React to build user interface, then incrementally adopt Next.js features to solve common application requirements such as routing, data fetching, and integrations — all while improving the developer and end-user experience.

Whether you are an individual developer or part of a larger team, you can leverage React and Next.js to build fully interactive, highly dynamic, and performant web applications.

Why Tailwind CSS?

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project. Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects.

It fits well with Next.js, React Framework for production.

Why TypeScript?

TypeScript is very useful and efficient when the day comes for code redesigns or factorizations.

If a code module changes its behavior, the development team will be automatically alerted wherever this module is used and implemented. Therefore, the team will be more serene and secure in the redesign, thus improving the maintainability of a project over time.

In addition, it improves developer productivity by clearly displaying syntax errors during compilation as if it were a native language.

Do you want to build application with bug-free, well-optimized and good SEO, easily and rapidly? Start TNT stack, now.

1. Create a New Next.js Project with TypeScript

I like to use Yarn CLI for fast, reliable, and secure dependency management. Create Next.js project with the following command.

More info: plz refer this to use create-next-app

Set src Directory and Change Project Structure.

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

The feature is one of my favorite advanced features in Next.js and I always have this process when start Next.js project.

The baseUrl configuration option allows you to import directly from the root of the project. So let us add baseUrl to tsconfig.json and set value to “src”.

Ok, nice! Let us refactor project app, now.

• First of all, delete Home.module.css of styles. We don’t need it.
• Move pages and styles directories to src root directory.

• Refactor src/pages/index.tsx like this.

• Refactor src/pages/index.tsx as it is now.

2. Install Tailwind CSS

Great! We have installed tailwind and its dependencies.

Now you need to createpostcss.config.js and tailwind.config.js to configure some stuffs. This command will generate both postcss.config.js and tailwind.config.js at the same time.

• Configure tailwind.config.js.

To configure your template paths, add the paths in tailwind.config.js.

It means tailwind applies its utility classes to all JavaScript and TypeScript files of src directory.

• Configure postcss.config.js

Let us skip it as is, because tailwindcss and autoprefixer are added to postcss.config.js by default.

• Add the Tailwind directives to Global CSS (styles/global.css) and import it in _app.tsx (We have already imported it, there)

Yes, you should be able to use tailwind utility classes, right now.

Ah, do you get the warning Unknown at rule @tailwindcss(unknownAtRules) in VS Code? You can read this and fix it easily. I just hope you do fix it. ;)

Final Tip

• Use Tailwind CSS IntelliSense extension in your VS Code.
• Use Automatic Class Sorting with Prettier but it is optional. :)

Those will make our life easier.

Conclusion

We learned how to integrate Tailwind in Next.js with TypeScript, this time. Hope you find it helpful and useful!

I have pushed updates for this article on this repo. Feel free to clone this repo to use as a starter template for TNT stack and follow me on Github.

plz don’t be stingy with the stars on your hand. It will push me to success.

If you liked this article, clap your applause enthusiastically and plz don’t forget to click Follow button. :D