Noah
Noah
PostsComments
KPCKevin Powell - Community
Created by CDL on 4/26/2024 in #front-end
React + Tailwindcss users? Help with some examples please!
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.
9 replies
KPCKevin Powell - Community
Created by CDL on 4/26/2024 in #front-end
React + Tailwindcss users? Help with some examples please!
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.
9 replies
KPCKevin Powell - Community
Created by CDL on 4/26/2024 in #front-end
React + Tailwindcss users? Help with some examples please!
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>
9 replies