Tailwind CSS Theme Setup 👨‍💻 Develop an App from Scratch (Part 7)

In this video, I will demonstrate how to configure the Tailwind CSS theme settings. The Tailwind setup will be done in the context of a Next.js application. The valuable insight here is that I am working on a real application - a budget tracking app that I am building from scratch as a side-project. The styles setup includes setting up SASS as a preprocessor in the Next.js application and then configuring the tailwind theme with the respective colors, fonts, font sizes and spacings. Tailwind CSS is utility-based CSS framework that exposes atomic utility styles with single responsibility.
What you'll learn:
- Setup SASS/SCSS as the Preprocessor in a Next.js Application
- Include/Use a Google Font (Lato) in a Next.js Application
- Configure the Tailwind CSS Theme
Repository:
bw-monorepo: github.com/nikelaz/bw-monorepo
bw-backend-service: github.com/nikelaz/bw-backend...
bw-web-client: github.com/nikelaz/bw-web-client
Contents:
0:00 Introduction
0:30 Next.js Application Preparation
2:11 Setup SASS/SCSS as a CSS Preprocessor
4:09 Setup/Use a Google Font (Lato) in Next.js
6:35 Global Styles
7:00 Tailwind Theme Configuration
26:20 Conclusion
Social Media:
Email: nikola.n.lazarov@outlook.com
Twitter: / nikelaz
LinkedIn: / nikola-lazarov
#tailwindcss #tailwind