KPC
Kevin Powell - CommunityCDL

React + Tailwindcss users? Help with some examples please!

I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but vanilla css for 3+ years and sadly, this stuff is pure alien to my little pepega brain. Could you perhaps show me an example of a card, or a navbar using React/Tailwind? or honestly just any kinda simple component so I can get a feel as to how this is used.. preferably something using grid/flex too. Thanks!
N
Noah•18d ago
With Tailwind, think about each CSS property that you would apply to a class as its own class. Instead of creating a custom class that contains all of the CSS properties you want for the element, you’re going to apply these utility classes directly to the element instead. Here’s an example from an LLM. 
 
<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div> 
 
<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>
S
Shane•18d ago
To make tailwind less garbage I think the idea is you create react components for repetitive styles, so instead of putting a million classes on every card div, you create a Card component 
export const Card = ({children}) => {
 return <div className="tailwind-garbage">{children}</div>
}
export const Card = ({children}) => {
 return <div className="tailwind-garbage">{children}</div>
}
C
CDL•18d ago
That's interesting.. a friend just showed me his codebase and it was full of this kinda of thing that first snippet by Noah is hideous though, there's more classes than actual content hahah
N
Noah•14d ago
Yeah, it’s ugly for sure. If you read through the Tailwind Docs, you’ll see them admitting it’s ugly too. From personal experience, I’ve done a bit of custom CSS and I build a lot faster with TW than with custom CSSing everything.
C
CDL•13d ago
That's good to know, I'm sure once I understand how it works I'll be able to build well with it. It's that or I rock bootstrap lol
A
Aoi•13d ago
One good practice is the arrange the class a bit. I prefer this system 
             Margin, etc  display, align, etc  font stuff  border, outline  color stuff 
<div className="m-8 p-8   flex items-center    text-white      outline        bg-black rounded"/>
             Margin, etc  display, align, etc  font stuff  border, outline  color stuff 
<div className="m-8 p-8   flex items-center    text-white      outline        bg-black rounded"/>
Even if you don't follow an exact order; it still makes it a bit more easier to use. There are also extensions for sorting tw clase (not sure how good it will be for version controll)
N
Noah•13d ago
This is a great point. I started using Prettier and I set it up in VSCode so that every time I save, it reformats the file. Tailwind has their own Prettier plugin that will automatically order the classes in tailwind's recommended order. It's super convenient.
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
Automatic Class Sorting with Prettier - Tailwind CSS
People have been talking about the best way to sort your utility classes in Tailwind projects for at least four years. Today we’re excited to announce that you can finally stop worrying about it with the release of our official Prettier plugin for Tailwind CSS.
Want results from more Discord servers?
Add your server
More Posts
Navbar helpi cant get the navbar to go end to end on the pageVS code control panelhey guys does anyone know how can i add source control button in my vs code left panel i tried everyAdding code blocks to websitesI see some websites and blogs like this have these really nicely styled code blocks with syntax highFlexbox column swap without media or container querie.I watched this video by KP (https://www.youtube.com/watch?v=LEkFckg7sfw), and got the flex solution Is there a way to test for css nesting support?I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make<a/> in component return being auto-assigned "button" class somehow, overwriting my classNamesThis is the relevant portion of the return: ``` <ul className="quickLink_list"> <li> creating calculator``` let operatorsArray = document.querySelectorAll('.operator') function bgColor(a){ let bgColLogin Page Improvements/ChangesI'm still learning html and css. What can I improve in my login page? <body> <div class="main-cAnimating outline offsetsIs there a smoother way to animate the offset of an outline? It looks choppy. https://codepen.io/nVertical alignment without wrapper?Problem: https://codepen.io/peendoc/pen/YzMgrwN I want the links to be clickable along the entire heAccessibility with icons/ images in linksHey everyone, I have been looking around with no real luck about the best practice for using svg's aCSS Custom Property Cheat SheetThis is my own cheat sheet for a alternative of Kevin's own oneNeed help with setting "slide-out" animation to a slide-in form.Currently it is working but I'm concerned about the usage of pointer-events as it will be availablt trouble using express.jsi have a js file that im using express.js code using the nodemailer module. What im trying to do is having trouble wrapping my head around mobile menushi all, i really love doing front end work, enjoy really getting into the gritty with SCSS, but my bflow utility issueHey, If I have a div with another div as it's child both utilizing a flow utility with each of theirNeed CSS help to create a container for a list of items (requirements below)Hi all~ I've been trying to create a 2-column list container and am curious if anyone could come up align-content:center does not work!Hi,why align-content :center; does not work in this css code? .parent{ background-color: gray;