Overview

You already learned how to integrate Tailwind CSS and Next.js with Typescript in the previous article. If not, check first.

Actually, there is another way to create TNT project.

As you can see here, there are lots of template starter with nextjs and other stack you want.

i.e. You can create TNT project with follwing command. More info, here

Look, how simple is this! right?

If yes, let us see how to add SASS in TNT project which already created last article. What I want to say before getting started, it is very easy. Good luck!

What is SASS?

SASS (Syntactically Awesome Stylesheets) is a CSS pre-processor that lets you use variables, mathematical operations, mixins, loops, functions, imports, and other interesting functionalities that make writing CSS much more powerful. In some ways, you may think of SASS as a style sheet extension language because it extends the standard CSS characteristics by introducing the benefits of a basic programming language. So SASS will compile your code and generate the CSS output a browser can understand.

Install SASS

You need to install SASS and you can do it with this command.

Nice, now we need to refactor some stuffs to use SASS.

Refactoring

• Rename global.css to global.scss

• Refactor _app.tsx like this

Yes, that is all. You can now use SASS in TNT project.

Ah, you already set but maybe you will get warning Unknown at rule @tailwindscss (unknownAtRules) in VS Code?

You have already set to ignore it in the previous article but it was ignore for css. So you can also ignore it for sass.

Press ctrl+, and search unknow... and set like this

Conclusion

We learned how to add SASS in TNT project, this time. I believe, using SASS in TNT project is also good to apply tailwind css and customize styles easily.

Actually, this is what I missed in previous article. Thanks for your reading!

I have pushed updates on the previous 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

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