121–130 of 296 posts
Locality of behavior can be done with few lines of js. https://github.com/gnat/css-scope-inline
https://developer.mozilla.org/en-US/docs/Web/CSS/@scope https://caniuse.com/?search=%40scope
CSS has become significantly more user-friendly than in the past, with most browsers now behaving consistently. It's worth learning as there is no build step involved, and it avoids cluttering your markup with excessive code. You could opt to use style attributes directly within your HTML. Historically, we avoided this to maintain a separation of concerns, but it's puzzling why some prefer reintroducing similar metho…
- Pseudo-classes (e.g., :hover, :focus)
- Pseudo-elements (e.g., ::before, ::after)
- Media queries
- Keyframes and animations
And the DX in a larger project isn't great either.
On the other hand, this upcoming standard is a great addition for collocating styles https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
Earlier quoted context omitted.
Not everything is a node App. We don't have a lock file because we don't have any local npm dependencies (as already mentioned). We're using `npx tailwindcss` as-is.
Shove an @ version in it
Earlier quoted context omitted.
Shove an @ version in it
Yep `npx tailwindcss@v3` is the solution we ended up with. Just had to change this in all our Apps and project templates.
Earlier quoted context omitted.
You clearly have a dependency on tailwindcss (if it can break you, you depend on it), and are using npm to fetch it (npx uses npm internally, they are installed together) so you can easily solve your problem by adding a couple json files with some version numbers in them. npx will pick up and use the version from your package.json, so no workflow change other than running `npm install …` once to generate package.json…
FWIW Tailwind can be used as a standalone executable. This is how Phoenix/Elixir bundles Tailwind without requiring npm.
Earlier quoted context omitted.
I find it really hard to not immediately be reminded of this: https://xkcd.com/1172/
We only use npm dependencies and bloated node_modules folders [1] if we absolutely have to and for our non node.js Apps we explicitly don't. [1] https://www.reddit.com/r/ProgrammerHumor/comments/6s0wov/hea...
I also use tailwindcss in a non-node project, but use npm package / lock files to easily lock javascript / css dependencies and make renovate able to update them for me.
As a once-strident critic of Tailwind for its many failings and incompatibilities with the state of the actually-modern "vanilla" web art, I am very pleased to see the huge strides they've made with v4. Being able to access the Tailwind theme through native CSS variables (they even have an example in the docs of a button component written in native CSS in an external stylesheet using native variables! Oh happy day!)…
I just want the color palette of the Tailwind CSS.
Earlier quoted context omitted.
You clearly have a dependency on tailwindcss (if it can break you, you depend on it), and are using npm to fetch it (npx uses npm internally, they are installed together) so you can easily solve your problem by adding a couple json files with some version numbers in them. npx will pick up and use the version from your package.json, so no workflow change other than running `npm install …` once to generate package.json…
FFS we don't have local dependencies. Which means we don't have any local node_modules and have never ran npm install (there are no dependencies to install!). There is no lock file or dependencies. Our Apps don't have any npm dependencies nor needs to run npm install by design, we're not going to start now, as already stated we're switching to `tailwindcss@v3` instead. The point is this was a documented supported use…
Just add a mostly empty package.json like this:
{
"devDependencies": {
"tailwindcss": "^3.4.17"
}
}
Earlier quoted context omitted.
> I suspect many of the pro/anti-Tailwind arguments are no longer relevant I feel there are two issues with Tailwind for me as a designer / design engineer. * First, JavaScript/Tailwind engineers have hijacked the conversation on design. Instead of "utility-first," "dead code elimination," and "type-safe CSS" I focus more on desing systems. Whether to use Perfect Fifth or Perfect Fourth in typography for example. * S…
No one cares what your typography ratio is if you can’t get it in front of a user quickly enough (dead code elimination), reliably enough (type safe), or cost effectively enough (i.e. if you have to pay for more developer time to implement the same work). Tailwind is a tool for craftspeople, not artists. It democratises design by making it simpler. For folks that are really good designers, they should be happy that t…
Please explain how this is better than expressing typographic scales with CSS variables and calc()?