Posts tagged: css

💭 feat: add llms.txt endpoint for LLM-optimized documentation by...

2026-01-08T01:22:02Z

feat: add llms.txt endpoint for LLM-optimized documentation by quantizor · Pull Request #2388 · tailwindlabs/tailwindcss.com

Add /llms.txt endpoint that serves a concatenated, text-only version of all Tailwind CSS documentation pages optimized for Large Language Model consumption.

Extract text from MDX files, removing J…

GitHub · github.com

Damn this one is getting some reach, I’ve seen it from Simon Willison and Justin Searls and t3.gg. I feel for Adam, He has built a fantastic product that the world is running with, something we all needed. Something that everyone laughs at turns their nose up “ppft I don’t need that” the first time they see it, but once they try people get it, and a lot of them like it and keep it. But its something that no one really wants to pay for, no matter how big of products get built on it. As we see more and more features coming to css, its not stopping, the work will always be there. I really hope to see something happen to tailwind to keep it afloat. massive growth and revenue down 80% does not help.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 CSS if() functions & reading-flow (in Chrome 137) - YouTube

2025-05-28T03:02:11Z

css if() just landed, I’m struggling to understand what I an do with this that I can’t do with something as old as classes. I can get it if I don’t have control over html creation or js to add classes. The example that Una shows includes data that could directly be a classname with a set of styles in css rather than this crazy css variable unpacking out of a data attribute and an if statement.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Build UIs that don't suck - YouTube

2025-04-15T13:50:53Z

How to make an entire clickable without presenting the entire content of the card as the link title. These videos are great, I’ve ran into these types of problems so many times, and definitely did not know about things like isolate to keep the z-index scoped to one element.

isolate - scope z-index inside this element so that it does not leak out.
[.relative [.absolute, inset-0, z-10]] - the inset zero is a modern shorthand for zeroing all sides, top-0, right-0, bottom-0, left-0.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Animate to height: auto; (and other intrinsic sizing keywords)...

2025-01-09T14:20:25Z

Animate to height: auto; (and other intrinsic sizing keywords) in CSS | CSS and UI | Chrome for Developers

Animate to and from intrinsic sizing keywords with `interpolate-size` and `calc-size()`

Chrome for Developers · developer.chrome.com

Css is getting so good, new things like interpolate-size are making things that use to require some deep expertise and hacks intuitive and easy.

/* Opt-in the whole page to interpolate sizes to/from keywords */
:root {
    interpolate-size: allow-keywords; /* 👈 */
}

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Styling better custom inputs with Dave Rupert - YouTube

2024-12-18T02:15:14Z

Reminder to tune in later, can’t watch now, but saw a link on Dave’s blog.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Wes Bos on X: "CSS Anchors: flip a tooltip to the bottom when ...

2024-11-19T14:39:36Z

External Link

X (formerly Twitter) · x.com

These css anchors are crazy that you can do this with html and not a bunch of js, probably requiring a library or framework.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Wes Bos on X: "Are you using position: absolute; to overlap el...

2024-09-13T15:43:03Z

External Link

X (formerly Twitter) · x.com

This is a pretty incredible use of css grid to overlay items overtop of each other without needing to resort to position: absolute and the side effects that it brings.

.wrap {
  display: grid;
  & > * {
    grid-row: 1;
    grid-column: 1;
  }
}

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Customize and apply backgrounds fast | SVG Backgrounds

2024-06-12T16:09:25Z

SVG Backgrounds, icons, and other website graphics

👉 Copy-and-paste backgrounds, patterns, icons, and other website graphics directly into projects. All customizable, tiny in file size, and licensed for multi-use.

SVG Backgrounds · svgbackgrounds.com

svgbackgrounds is a really awesome resource for svg things recently featured on https://shoptalkshow.com/618/

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Text Decoration - Tailwind CSS

2024-05-30T18:32:45Z

text-decoration-line - Typography

Utilities for controlling the decoration of text.

tailwindcss.com

Tailwind calls strikethrough line-through. This caught me off guard and took me a minute to find.

Control how text is decorated with the underline, no-underline, and line-through utilities.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Adam Wathan on X: "Hear me out. https://t.co/QHkEI6SJYZ" / X

2023-12-13T01:22:17Z

External Link

X (formerly Twitter) · twitter.com

I’m going to give this trick a shot on my sites, and see how I like it.

* {
  min-width: 0
}

Down in the comments @adamwathan goes on to say.

Basically every layout overflow bug ever boils down to some flex or grid child needing min-width: 0 😄

Oh and @ryanflorence also says in the comments.

I … do this.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 CSS @media print issues with background-color; - Stack Overflow

2023-11-30T03:00:52Z

External Link

stackoverflow.com

Get those print colors exact

body{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 page-break-after - CSS: Cascading Style Sheets | MDN

2023-11-30T02:38:49Z

page-break-after - CSS | MDN

The page-break-after CSS property adjusts page breaks after the current element.

MDN Web Docs · developer.mozilla.org

I’m working on something that might go to print, so I want the page breaks to happen somewhat in my control as the content author. As I do my writing I break my content up in to many short sections using h2, sometimes an h3. These are generally short sections that go together, should stay together, and typically are not too lengthy to cause a large white space in print.

I found a way in css to only allow page breaks to happen on h2 and h3, and it turned out perfect, suck it WSIWIG editors

* {
  page-break-before: avoid;
}

h2,
h3 {
  page-break-before: auto;
}

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Tailwind Connect 2023 — Keynote - YouTube

2023-10-19T13:41:24Z

Tailwind comes with space that I have never heard of that is made to give margin and padding together in one class. Adam dropped it here in the Tailwind Connect conference.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Overflow - Tailwind CSS

2023-10-11T19:16:21Z

overflow - Layout

Utilities for controlling how an element handles content that is too large for the container.

tailwindcss.com

Controlling overflow with tailwindcss

Examples #

<div class="overflow-visible ..."></div>

<div class="overflow-hidden ..."></div>

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 How To Create a Custom Scrollbar

2023-10-11T19:11:49Z

Default scrollbars on a dark theme website are just the ugliest thing. This page covers all the pseudo selectors needed to style the scrollbar.

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Change Autocomplete Styles in WebKit Browsers | CSS-Tricks - C...

2023-10-10T01:48:04Z

Change Autocomplete Styles in WebKit Browsers | CSS-Tricks

We got a nice tip from Lydia Dugger via email with a method for changing the styles that WebKit browsers apply to form fields that have been autocompleted.

CSS-Tricks · css-tricks.com

All the hover, select, autofil, focus combinations have left me confused on how to consistently get my form elements styled in dark mode

This snippet from CSS tricks has fixed all the different states for me to give me full control.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Preline UI - Tailwind CSS component library | Preline UI, craf...

2023-08-21T15:10:54Z

Tailwind css component library. There are many examples with copy and pastabily with the tailwind classes already setup.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Tailwind CSS Cheat Sheet

2023-08-21T15:03:41Z

Tailwind CSS Cheat Sheet

Cheat sheet to learn Tailwind CSS quickly. Browse and search all Tailwind utility classes or CSS properties on one page.

nerdcave.com

A nice searchable cheatsheet for tailwindcss classes.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Tailwind CSS Crash Course - YouTube

2023-08-04T12:55:03Z

Nice intro into tailwind, I definitely started grasping some of the concepts after watching Brad.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Dark Form

2023-07-28T14:59:37Z

A nice codepen reference for dark forms. I am using it for my thoughts chrome extension.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts