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.csstoglobal.scss
- Refactor
_app.tsxlike 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
