6 ms·

CTRL+u gives a nice example of the syntax. For example to make a box with rounded corners and a top and bottom section, all you need is this intuitive one-line

by mg 3y ago

CTRL+u gives a nice example of the syntax. For example to make a box with rounded corners and a top and bottom section, all you need is this intuitive one-liner: <div class="mt-5 mb-8 first:mt-0 last:mb-0 relative overflow-hidden rounded-2xl"><div class="pt-2 bg-slate-800 shadow-lg group"><div class="flex text-slate-400 text-xs leading-6"><div class="flex-none text-sky-300 border-t border-b border-t-transparent border-b-sky-300 px-4 py-1 flex items-center">app.css</div><div class="flex-auto flex items-center bg-slate-700/50 border border-slate-500/30 rounded-tl"></div></div><div class="children:my-0 children:!shadow-none children:bg-transparent"><pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">"tailwindcss"</span><span class="token punctuation">;</span></span></code></pre></div></div><div class="pointer-events-none absolute inset-0 rounded-2xl dark:ring-1 dark:ring-white/10 dark:ring-inset" aria-hidden="true"></div></div>

elaus 3y ago
I don't think this is a very good example, because it's not just "a box with rounded corners and a top and bottom section". It's a fully styled box containing formatted code (leading to a lot of spans and classes for individual chars in this code).
kingofthehill98 3y ago
I'll take this over grepping hundreds CSS files trying to find that one specific class and hoping it's not used anywhere else anyday of the week.
- degun 3y ago
  Can you not keep your files in some sort of order?
  - kingofthehill98 3y ago
    On my pet projects? Absolutely. On work projects with 5 years of contributions wrote by 50+ collaborators and close deadlines? Hardly think so.
- leptons 3y ago
  If you have to use grep to find a CSS class, you're doing it very wrong. Not having any discipline or organizational skills leads to needing grep to find CSS, it is not something inherent to CSS itself. In my front end, for example, I have registration-page.jsx and registration-page.less, and there is really zero mystery where the styles are for the registration-page. It uses components like password-input.jsx, and guess what? the CSS for that is in password-input.less. There's no grepping, there's no difficulty finding the classes that are specified. Everything is very orderly and easy to find.
  - psygn89 3y ago
    Even if your styles aren't colocated you can use sourcemapping alongside established patterns on how to structure out your scss/less. Just inspect the element and click on the filename next to your selector and it opens in your editor.
  - yurishimo 3y ago
    And what about projects that don’t exist in a paradigm where css can be collocated with templates/components? Legacy projects? Large contributor teams?
- ehutch79 3y ago
  grep -R .class-name ./assets/css/wherever Or use your IDE's project search? In vscode you can just ctrl-click on the class and it should find it? IT IS NOT DIFFICULT
  - yurishimo 3y ago
    Until you discover that one feature in production that is built with dynamically concatenated class names and the SCSS file is deeply nested to hell and back so your search didn’t find `card__${cardType}__inner—-${userPrefColor}-background` Ask me how I know!
    - ehutch79 3y ago
      That doesn't sound like something any tooling should be supporting. I've done that before, and everyone who does regrets it. It should be a linting error, not something we need to re-write searching to support.
      - cqqxo4zV46cp 3y ago
        What do you honestly expect someone to reply to this comment? Yes, and? Developers tend to do bad things sometimes. It happens. That’s the reality.
- leemcalilly 3y ago
  Yes. The best explanation of Tailwind is when Adam describes it as “an API for your design system.” The biggest problem with CSS when trying to maintain a design system is the same problems you run into any time you use inheritance in programming. Inheritance has its place, but making your CSS composable the way Tailwind does makes it practical to actually adhere to a design system. If you’re more worried about the purity of your HTML, then Tailwind is not for you.
- paradox460 3y ago
  Sourcemaps and the browser inspector will tell you exactly where the styling for that element is coming from
mm263 3y ago
Why use a bad faith interpretation of what Tailwind is? You know this isn't what it looks like when you are developing
- micromacrofoot 3y ago
  yeah it just looks like that to everyone else, so you're avoiding the pain yourself while inflicting it upon anyone interested in inspecting the compiled output
  - soneca 3y ago
    Who would be interested in inspecting the compiled code? Genuine question.
    - diggan 3y ago
      I'm so glad this wasn't the prevailing opinion when they first came up with the web. "Inspect source" is how I learned how to build my first website in the newly released browser called "Firefox 1.0".
      - soneca 3y ago
        It wasn’t an opinion, but I think you gave me the answer anyway, which seems to be “students learning CSS”. I never learned CSS like this, so I wouldn't think of it. I started learning CSS only about 6 years ago. So I had Stack Overflow and MDN web docs for it.
        timr 3y ago
        The answer, as with all code, is "you, six months from now". Anything that makes your code less readable is a fail. I understand that people want to treat CSS and HTML as assembly, but that's a leaky metaphor, and only works insofar as you never have to debug an actual webpage. Every place I've ever seen with tailwind has struggled with front end work, because the end result is so horribly abstracted from the code.
reidjs 3y ago
Much prefer reading this and making a change in place, than to go through a bunch of overloaded class names (e.g., 'container') in dozens of .css files just to adjust something like a margin on it.
Trufa 3y ago
When you format that code, it's easily readable.
haswell 3y ago
A few issues here: 1. When you're working with this code, it's far easier to read with proper formatting and syntax highlighting. I know people take issue with the verbosity of tailwind, but anything will look awful if you remove formatting. 2. This is lacking an equivalent non-tailwind approach. If you can share the equivalent vanilla HTML/CSS (or pick your preferred framework), and then paste it here as an unformatted text blob, this might be a bit more fair. 3. I don't think it's fair to describe this as just a "box with rounded corners and a top and bottom section". That can be done with tailwind with less complexity/syntax, if that's truly all you want.
- darajava 3y ago
  Here is an example from their own website. It's for a very simple interface. Do you think this looks maintainable? <main class="py-6 px-4 sm:p-6 md:py-10 md:px-8"> <div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2"> <div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1"> <h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwood</h1> <p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire house</p> </div> <div class="grid gap-4 col-start-1 col-end-3 row-start-1 sm:mb-6 sm:grid-cols-4 lg:gap-6 lg:col-start-2 lg:row-end-6 lg:row-span-6 lg:mb-0"> <img src="/beach-house.jpg" alt="" class="w-full h-60 object-cover rounded-lg sm:h-52 sm:col-span-2 lg:col-span-full" loading="lazy"> <img src="/beach-house-interior-1.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg sm:block sm:col-span-2 md:col-span-1 lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> <img src="/beach-house-interior-2.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg md:block lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> </div> <dl class="mt-4 text-xs font-medium flex items-center row-start-2 sm:mt-1 sm:row-start-3 md:mt-2.5 lg:row-start-2"> <dt class="sr-only">Reviews</dt> <dd class="text-indigo-600 flex items-center dark:text-indigo-400"> <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current dark:stroke-indigo-500"> <path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span>4.89 <span class="text-slate-400 font-normal">(128)</span></span> </dd> <dt class="sr-only">Location</dt> <dd class="flex items-center"> <svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300"> <circle cx="1" cy="1" r="1" /> </svg> <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true"> <path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" /> <path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" /> </svg> Collingwood, Ontario </dd> </dl> <div class="mt-4 col-start-1 row-start-3 self-center sm:mt-0 sm:col-start-2 sm:row-start-2 sm:row-span-2 lg:mt-6 lg:col-start-1 lg:row-start-3 lg:row-end-4"> <button type="button" class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Check availability</button> </div> <p class="mt-4 text-sm leading-6 col-start-1 sm:col-span-2 lg:mt-6 lg:row-start-4 lg:col-span-1 dark:text-slate-400"> This sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two. This beach house sits in a vibrant neighborhood littered with cafes, pubs, restaurants and supermarkets and is close to all the major attractions such as Edinburgh Castle and Arthur's Seat. </p> </div> </main>
cle 3y ago
A box with rounded corners and a top and bottom section: <div class="bg-white rounded-2xl"> <div class="bg-blue-500">Top Section</div> <div>Bottom Section</div> </div>
wturner 3y ago
This isn't exactly honest but it's still funny.
aleksiy123 3y ago
as opposed to the very intuitive css one liner?

by mg 3y ago

elaus 3y ago

I don't think this is a very good example, because it's not just "a box with rounded corners and a top and bottom section". It's a fully styled box containing formatted code (leading to a lot of spans and classes for individual chars in this code).

kingofthehill98 3y ago

I'll take this over grepping hundreds CSS files trying to find that one specific class and hoping it's not used anywhere else anyday of the week.

degun 3y ago
Can you not keep your files in some sort of order?
- kingofthehill98 3y ago
  On my pet projects? Absolutely. On work projects with 5 years of contributions wrote by 50+ collaborators and close deadlines? Hardly think so.
leptons 3y ago
If you have to use grep to find a CSS class, you're doing it very wrong. Not having any discipline or organizational skills leads to needing grep to find CSS, it is not something inherent to CSS itself. In my front end, for example, I have registration-page.jsx and registration-page.less, and there is really zero mystery where the styles are for the registration-page. It uses components like password-input.jsx, and guess what? the CSS for that is in password-input.less. There's no grepping, there's no difficulty finding the classes that are specified. Everything is very orderly and easy to find.
- psygn89 3y ago
  Even if your styles aren't colocated you can use sourcemapping alongside established patterns on how to structure out your scss/less. Just inspect the element and click on the filename next to your selector and it opens in your editor.
- yurishimo 3y ago
  And what about projects that don’t exist in a paradigm where css can be collocated with templates/components? Legacy projects? Large contributor teams?
ehutch79 3y ago
grep -R .class-name ./assets/css/wherever Or use your IDE's project search? In vscode you can just ctrl-click on the class and it should find it? IT IS NOT DIFFICULT
- yurishimo 3y ago
  Until you discover that one feature in production that is built with dynamically concatenated class names and the SCSS file is deeply nested to hell and back so your search didn’t find `card__${cardType}__inner—-${userPrefColor}-background` Ask me how I know!
  - ehutch79 3y ago
    That doesn't sound like something any tooling should be supporting. I've done that before, and everyone who does regrets it. It should be a linting error, not something we need to re-write searching to support.
    - cqqxo4zV46cp 3y ago
      What do you honestly expect someone to reply to this comment? Yes, and? Developers tend to do bad things sometimes. It happens. That’s the reality.
leemcalilly 3y ago
Yes. The best explanation of Tailwind is when Adam describes it as “an API for your design system.” The biggest problem with CSS when trying to maintain a design system is the same problems you run into any time you use inheritance in programming. Inheritance has its place, but making your CSS composable the way Tailwind does makes it practical to actually adhere to a design system. If you’re more worried about the purity of your HTML, then Tailwind is not for you.
paradox460 3y ago
Sourcemaps and the browser inspector will tell you exactly where the styling for that element is coming from

mm263 3y ago

Why use a bad faith interpretation of what Tailwind is? You know this isn't what it looks like when you are developing

micromacrofoot 3y ago
yeah it just looks like that to everyone else, so you're avoiding the pain yourself while inflicting it upon anyone interested in inspecting the compiled output
- soneca 3y ago
  Who would be interested in inspecting the compiled code? Genuine question.
  - diggan 3y ago
    I'm so glad this wasn't the prevailing opinion when they first came up with the web. "Inspect source" is how I learned how to build my first website in the newly released browser called "Firefox 1.0".
    - soneca 3y ago
      It wasn’t an opinion, but I think you gave me the answer anyway, which seems to be “students learning CSS”. I never learned CSS like this, so I wouldn't think of it. I started learning CSS only about 6 years ago. So I had Stack Overflow and MDN web docs for it.
      - timr 3y ago
        The answer, as with all code, is "you, six months from now". Anything that makes your code less readable is a fail. I understand that people want to treat CSS and HTML as assembly, but that's a leaky metaphor, and only works insofar as you never have to debug an actual webpage. Every place I've ever seen with tailwind has struggled with front end work, because the end result is so horribly abstracted from the code.

reidjs 3y ago

Much prefer reading this and making a change in place, than to go through a bunch of overloaded class names (e.g., 'container') in dozens of .css files just to adjust something like a margin on it.

Trufa 3y ago

When you format that code, it's easily readable.

haswell 3y ago

A few issues here: 1. When you're working with this code, it's far easier to read with proper formatting and syntax highlighting. I know people take issue with the verbosity of tailwind, but anything will look awful if you remove formatting. 2. This is lacking an equivalent non-tailwind approach. If you can share the equivalent vanilla HTML/CSS (or pick your preferred framework), and then paste it here as an unformatted text blob, this might be a bit more fair. 3. I don't think it's fair to describe this as just a "box with rounded corners and a top and bottom section". That can be done with tailwind with less complexity/syntax, if that's truly all you want.

darajava 3y ago
Here is an example from their own website. It's for a very simple interface. Do you think this looks maintainable? <main class="py-6 px-4 sm:p-6 md:py-10 md:px-8"> <div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2"> <div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1"> <h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwood</h1> <p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire house</p> </div> <div class="grid gap-4 col-start-1 col-end-3 row-start-1 sm:mb-6 sm:grid-cols-4 lg:gap-6 lg:col-start-2 lg:row-end-6 lg:row-span-6 lg:mb-0"> <img src="/beach-house.jpg" alt="" class="w-full h-60 object-cover rounded-lg sm:h-52 sm:col-span-2 lg:col-span-full" loading="lazy"> <img src="/beach-house-interior-1.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg sm:block sm:col-span-2 md:col-span-1 lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> <img src="/beach-house-interior-2.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg md:block lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> </div> <dl class="mt-4 text-xs font-medium flex items-center row-start-2 sm:mt-1 sm:row-start-3 md:mt-2.5 lg:row-start-2"> <dt class="sr-only">Reviews</dt> <dd class="text-indigo-600 flex items-center dark:text-indigo-400"> <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current dark:stroke-indigo-500"> <path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span>4.89 <span class="text-slate-400 font-normal">(128)</span></span> </dd> <dt class="sr-only">Location</dt> <dd class="flex items-center"> <svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300"> <circle cx="1" cy="1" r="1" /> </svg> <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true"> <path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" /> <path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" /> </svg> Collingwood, Ontario </dd> </dl> <div class="mt-4 col-start-1 row-start-3 self-center sm:mt-0 sm:col-start-2 sm:row-start-2 sm:row-span-2 lg:mt-6 lg:col-start-1 lg:row-start-3 lg:row-end-4"> <button type="button" class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Check availability</button> </div> <p class="mt-4 text-sm leading-6 col-start-1 sm:col-span-2 lg:mt-6 lg:row-start-4 lg:col-span-1 dark:text-slate-400"> This sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two. This beach house sits in a vibrant neighborhood littered with cafes, pubs, restaurants and supermarkets and is close to all the major attractions such as Edinburgh Castle and Arthur's Seat. </p> </div> </main>

cle 3y ago

A box with rounded corners and a top and bottom section: <div class="bg-white rounded-2xl"> <div class="bg-blue-500">Top Section</div> <div>Bottom Section</div> </div>

wturner 3y ago

This isn't exactly honest but it's still funny.

aleksiy123 3y ago

as opposed to the very intuitive css one liner?