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: nikola.n.lazarov@outlook.com
Twitter: / nikelaz
LinkedIn: / nikola-lazarov
#tailwindcss #tailwind
On this page of the site you can watch the video online Tailwind CSS Theme Setup 👨💻 Develop an App from Scratch (Part 7) with a duration of hours minute second in good quality, which was uploaded by the user NL Tech 30 March 2024, share the link with friends and acquaintances, this video has already been watched 1,098 times on youtube and it was liked by 17 viewers. Enjoy your viewing!
