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: https://github.com/nikelaz/bw-monorepo
bw-backend-service: https://github.com/nikelaz/bw-backend...
bw-web-client: https://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: [email protected]
Twitter: Β Β /Β nikelazΒ Β
LinkedIn: Β Β /Β nikola-lazarovΒ Β
#tailwindcss #tailwind
Watch video Tailwind CSS Theme Setup π¨βπ» Develop an App from Scratch (Part 7) online without registration, duration hours minute second in high quality. This video was added by user NL Tech 30 March 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 800 once and liked it 14 people.