Tailwind CSS & shadcn/ui
The two tools that make every app look professional without writing a single line of custom CSS
The Problem They Solve
Picture this: you've built a working web app. It fetches data from your database, the logic is correct, the buttons do what they're supposed to do. You open it in a browser and show it to a client.
It looks like a government form from 2004.
Plain text. No colors. Everything crammed together. The client smiles politely and asks if the final version will look different.
This is exactly where Tailwind CSS and shadcn/ui come in.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework. Before we unpack what that means, here is the Excel analogy that makes it click immediately.
The Excel Analogy
In Excel, when you want to format a cell, you use the toolbar:
- Click B to make text bold
- Click the color picker to change font color
- Click the border button to add a border
- Click the alignment buttons to center text
You don't write a "formatting script." You apply small, specific formatting instructions one at a time, directly to the cell. Each button does exactly one thing.
Tailwind works exactly the same way — but for web pages.
Instead of clicking a toolbar, you add small class names directly to your HTML/JSX elements. Each class does exactly one thing:
font-boldmakes text boldtext-red-500makes text redborderadds a bordertext-centercenters text
You're applying formatting directly to the element, one instruction at a time. No separate CSS file. No naming things. Just describe what you want, directly on the element.
Without Tailwind vs. With Tailwind
Without Tailwind (traditional CSS):
With Tailwind:
The second version is faster to write, easier to read, and eliminates the back-and-forth between files.
What is shadcn/ui?
If Tailwind gives you the formatting toolbar, shadcn/ui gives you the chart templates.
The Excel Analogy
When you need a chart in Excel, you don't draw each bar from scratch. You pick a chart type — bar, pie, line — and Excel gives you a complete, professionally formatted chart. You then customise the colors, title, and data. The structure is done; you just configure it.
shadcn/ui does the same for UI components.
Need a button? Here's a professionally designed button with hover states, focus rings, disabled states, and multiple variants (primary, outline, ghost, destructive). Need a dialog box? Here's one with backdrop, close button, animation, and keyboard support.
You don't build these from scratch. You add them to your project and use them.
What Makes shadcn/ui Different
Most component libraries (Material UI, Ant Design, Chakra) give you components you import from their package. You're locked into their design decisions. Changing anything is a fight.
shadcn/ui takes a different approach: it copies the component code directly into your project.
When you run npx shadcn-ui@latest add button, it creates src/components/ui/button.tsx in your codebase. That file is yours. You can read it, understand it, and modify it however you want. You're not fighting a third-party package — you own the code.
This is why every Sahinov project looks good from day one. The training stack comes with Tailwind and shadcn/ui pre-configured. You're not starting from a blank slate — you're starting with professional-grade design tools already loaded.
How They Work Together
Tailwind provides the styling system. shadcn/ui provides pre-built components that use Tailwind under the hood.
When you use a shadcn/ui button and want to tweak something — make it slightly wider, change the text size — you add or change Tailwind classes. The entire system speaks the same language.
Already Set Up For You
Every project you create with the Sahinov training stack already has both tools installed and configured. You will never run the Tailwind installation commands yourself during training. The setup is done.
What this means in practice:
Start writing classes immediately
Open any component file and add Tailwind classes to any element — they work out of the box.
Add shadcn components in one command
Run npx shadcn-ui@latest add [component-name] and the component is ready to import.
Consistent design from day one
Your project inherits the design system automatically — colors, fonts, spacing all pre-configured.
No CSS files to manage
You will rarely if ever touch a .css file. All styling lives in the className attribute of your components.
What You Will Learn in This Module
The following pages cover everything you need to start building real, professional-looking UIs:
- Tailwind Concepts — how the class system works, responsive prefixes, hover states
- Utility Classes — the 30 classes you will use every single day
- shadcn/ui Setup — what the setup command does, where files go
- shadcn/ui Components — using Button, Input, Card, Dialog, and more
- Theming — changing colors and making the design system your own
- Verification — confirming you can apply all of this confidently
By the end, you will be able to look at any page on a modern web app and understand how it was built, and you will be able to build something similar yourself.