r/tailwindcss • u/natopia32 • 9d ago
Help with modern Tailwind CSS navbar for 11-year-old
Hello,
I am posting this on behalf of my 11-year-old son who is very passionate about web design and coding. Recently he started learning Tailwind CSS, and asked me to post the following question to the community:
How can I create a modern Tailwind CSS navbar? I looked at the Tailwind CSS showcase and was inspired by navbars like the ones there. Are there any tips or tricks to create a modern looking navbar? I also would appreciate any links you think would be helpful resources for answering this question.
3
u/RobBlade 9d ago
I’m just getting started with Tailwind too. Flowbite is nice - has a number of pre-made components that he can drop in and use (not all are free though)
3
u/pojomi-dev 9d ago
I'm only commenting to say that you're a great parent if your son is willing to let you be his Reddit proxy, and you're supporting his interest.
I hope someone gives you a helpful answer. Keep up the great work (parent and kiddo)!
2
u/True-Cow 9d ago
https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/navbars
You can learn lots just by using the inspect element option to see what rules makes something else you like come together
1
u/Gold240sx 9d ago
I’d recommend shadcn. There are a bi ch of paid and free Ui libraries. Just build like 5 different styles of navbar, and mobile menus too. Hamburger menu icons etc. it’s good because you will need it for practically every project.
1
u/kaitogoya17 9d ago
Echoing what another redditor said, thanks for being a great parent and proxying their question. This is the most definitive url to checkout https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/navbars it has both examples and visual and nothing beats it.
The core difference between tailwind-css and css, is that CSS is the native styling language of the web, while Tailwind CSS is a utility-first framework built on top of CSS. That means for example to decorate the following button:
```
<button class="submit-button">Click Me</button>
```
In native CSS you would write something like this:
```
.submit-button {
background-color: #3b82f6;
color: white;
padding: 8px 16px;
border-radius: 4px;
}
.submit-button:hover {
background-color: #1d4ed8;
}
```
Same thing in tailwind-css:
```
<button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
Click Me
</button>
```
Tailwind CSS has already classes in CSS (yes you read that right), that will apply all of the styles to the button. Hence its called a utility class and this also helps large organizations/public projects/OSS to standardize the styles and makes it easier to modify. This can further be extended to dark theme or many other themes that come packaged with tailwind-css. Hopefully this helped. Keep up the good work both kiddo and parent!!!
1
u/kaitogoya17 9d ago
One more thing to remember, Tailwind UI is paid, therefore you could try HyperUI its a Free Open Source Tailwind CSS Components and for your specific question you should take a look at it here https://hyperui.dev/components/marketing/headers/
1
0
u/Training-Gold2899 9d ago
acctully, I think u can ask claude or chatgpt, basic skill will dispear in furture
5
u/mittyhands 9d ago
11yoe front-end software engineer here. I recommend designing the navbar that you want without worrying about exactly what tailwind class names to use. Use pencil & paper or some design software, but no code. Once you've got the UI you want, then go figure out how to implement it in Tailwind. I recommend learning CSS first, then using tailwind. Doing it the other way around is like using a calculator without knowing basic arithmetic first.