I’ve been using the upcoming text-wrap: balance CSS instruction for a while, and it’s happened so much that I wrote a Tailwind plugin for it.

This is one of my first npm packages, so this should be fun!

#tailwindcss #tailwind #css #npm

1 week ago

#Development #Reviews
Why we’re bad at CSS · Despite CSS’s latest advancements, its challenges continue

#CSS #Frontend #WebDevelopment #WebDev #DesignSystem #CssMethodology #CssFramework #Bootstrap #Tailwind #CoolCss #BEM

2 weeks ago

#Development #Cheatsheets
Mastering CSS blend modes · Blend modes are a powerful way to create endless visual effects

#BlendModes #WebDevelopment #WebDev #Frontend #CSS #Tailwind

2 weeks ago

Another update.

It's taking more time than expected, working on so (too!) many stuff in parallel...

I made a few stress tests and asked friends with fast internet if things load quick (everything is a hassle to load for my poor broadband internet BUT my website loads quite fast anyway on it compared to most websites); and I can confirm I'll keep this tech stack:
#Tailwind + #Svelte / #SvelteKit + API on #Directus. The SvelteKit part ran like a charm on a #RaspberryPi.

Thomas Michael Semmler
2 weeks ago

How are you handling #tailwind with cascade layers in #css

Ideally I would like to tell tailwind to just not process certain files, but it seems that I cannot do that - obviously. Nasty tool.

In this instance, I am working with a different library that uses cascade layers, but tailwind reserved the keyword base for its own devilish inner workings it seems. So when I import a module that uses @layer base, I get this nasty error message:

Any ideas?

Stacktrace reading @layer base is used but no matching @tailwind directive is present.
sukima :verified:
2 weeks ago

I have to vent.

For good or for bad, #tailwind makes my #html look like I shat my pants.

There, I said it. Deal with it.

Codappix GmbH
2 weeks ago

Du hast bisher keine passende Lösung gefunden? Wir entwickeln maßgeschneiderte 𝐒𝐨𝐟𝐭𝐰𝐚𝐫𝐞 𝐋ö𝐬𝐮𝐧𝐠𝐞𝐧 die deinen individuellen Anforderungen gerecht werden. Den Möglichkeiten sind dabei fast keine Grenzen gesetzt.

#Bootstrap #CSS3 #HTML5 #JavaScript #Laravel #PHP #Symfony #Tailwind #CSS #Vuejs und mehr ✔️.

Quick note on Adding Custom Colour Aliases to Tailwind CSS, which is sort of — but not quite — like the examples they have in the docs. #Tailwind

3 weeks ago

What are the best #AI tools out there right now to quickly build a web interface (using #Tailwind #CSS) given that I am bad with design?

#ChatGPT has good ideas, but it's not the best medium to generate code.

Thomas Michael Semmler
3 weeks ago

I have explained this poorly. There are base selectors that set a font-size for a h3, for example, within this gobal.scss. These regular element selectors correctly come from the 'generic' layer, that it set it to. But anything that is wrapped in @media {...} does then appear as unlayered.

This creates problems, because there are selectors from other layers that are supposed to override this, but can't because the unlayered styles are winning.

An odd issue! #css #tailwind

Thomas Michael Semmler
3 weeks ago

Oh, I have noticed something curious.

I am traversing a codebase that nastily relies on tailwind. So I banished it to its own dirty cascade layer where its shenanigans can't interfere with my crap.

Three files live there, one main entry file and two files that are imported. So I use `import ('./global.css') layer(generic)` to move the style rules in global to its dedicated layer. BUT, all at-rule'd selectors are now outside of the layer!

A tailwind bug, or @import bug?

#css #tailwind

kaiserkiwi :kiwibird:
3 weeks ago

Really good short article about the problem with Tailwind. With a quote from the creator of Tailwind that even he doesn't like the "Utility classes for everything!" approach.

This is definitely a bookmark for the next discussion with a die-hard fan that doesn't reflect on their choices. #CSS #Tailwind #WebDev

Friday Front-End
3 weeks ago

What's your problem with #Tailwind? "It is faster during the prototyping phase… And then there inevitably comes a time where I need to update the style." #css

The forth day in my entire life I wrote some #Rust 🦀

I started implemented the class parser for arbitrary #tailwind values

`.bg-[#1da1f2]#name Text` already works and results in `("#name Text", ".bg-[#1da1f2]")`

More complex classes like `lg:[&:nth-child(3)]:hover:underline` or `bg-[url('/what_a_rush.png')]` needs to be implemented as well and is not working right now

But for today I will take a break 🙂


Rust code on GitHub that shows a parser function for class.
It already started to considered arbitrary tailwind values.

Tailwind Elements : 500+ UI components - Nice!

#web #css #toolkit #tailwind #ui #opensource

The other project I have in mind would be a #vue #component #framework that is based on #tailwind / #Unocss, supports theming out of the box and uses e.g. #vue's #generic from to e.g. better type `DataTables`
The name of that framework could be `Vueperlativ` which is the combination of Vue and Superlativ 😅

Khalid ⚡
1 month ago

Shout out to my favorite Belgian 🇧🇪, @maartenballiauw for fixing #Tailwind support in #aspnetcore #razor files when using #JetBrainsRider.

You now get proper support for Tailwind classes that might not yet exist in your CSS files.

Tailwind code completion in JetBrains Rider
1 month ago

@bersling @brad_frost this is all super true. I have used tailwind on a few projects to dial the interface in before a real designer cleaned it up, and it still did look passable.

#Tailwind is now part of #PhoenixFramework , so that will get really interesting.

Andy Stabler
1 month ago

Shipped a #tailwind -ified version of the #rails app behind today 🎉

Everything should work as it did before (split your savings into pots), but it's a bit cleaner now 😄

A screenshot of Rolo's Money Box. The demo account shows £40,000 in a savings account. This savings account has pots for a house, a trip to Japan, and an emergency fund. Each pot shows a percentage of how close they are to a savings goal indicated by a progress bar.
1 month ago

Jane - one of my coworkers at Bitovi - has come up with a cool method to maintain relative font sizes in responsive design. Mind-blowing!

#css #javascript #ResponsiveDesign #tailwind #webdev #bitovi

Mario Munoz
1 month ago

The new project is another one of those "awesome" lists.

I'll probably write more about it at a later time, but if you have a passing interest in Python-based web design sans JavaScript, you may want to check it out.

The repo is a curated collection of Python packages using the PyHAT 🐍 🤠 stack (or some variation of it).

PyHAT: Python HTMX ASGI Tailwind

If you're looking for a declarative way of creating web apps, this may be for you!


I'm about to knock off for the day, so my little #Tailwind confession:

I use @apply plenty. I have no qualms about that. And I ain't gonna let 'em make me feel bad about it. You do you! 😜

Daniel Jonsson
1 month ago

What site with free Tailwind CSS templates would you recommend? I would like something simple to just get started. #webdev #tailwind

2 months ago

#tailwind 這個時間軸設計不錯

Gah! Enough messing around with meaningless `content` globs!

Using Django’s template loaders to configure Tailwind 🚀 #django #tailwind Enjoy! 🎁

Working on a new project that uses #Tailwind and wow, is really worth the money in the ease of finding the right component for whatever you're working on

2 months ago

From the #TailwindCSS Docs:

'Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it'

- EXACTLY what I'm thinking! 😣

#webdev #frontend #tailwind #css

Can someone please help me and tell me why #tailwindcss #tailwind generates this fricking extra class that undoes the collapse class

2 months ago


Yes, you can do this in the other CSS/JS/HTML ones, but I like it's simplicity.

#tailwind #css #tailwindcss

Shubham Arora
2 months ago

@fedora Looks good and love the use of #tailwind. However the typing effect is a litter jarring. I think the speed is a bit off and text size is too large without a blinking cursor.

2 months ago

I've mostly been away from #rails development recently, and the project I *was* maintaining was Rails 5.

But have been doing some greenfield work for a client, using Rails 7 with #turbo, #hotwire, #stimulusJS, the whole nine yards.

I gotta say, it's pretty awesome.

(#tailwind ftw also)


Village One Cooperative
2 months ago

Hey, it’s Harry! Earlier this week we launched the all new @TypeMates website + online shop! It’s been in the works for close to six months and we’re giddy with excitement to finally see it out in the wild!

Watch me click through it in this Loom or check it out for yourself:

We also have a little write-up ready which just went out to our newsletter subscribers:

(Built with @craftcms + Commerce, #Tailwind and petite-vue.)

A screenshot the new homepage, with the main headline reading “We are TypeMates, straightforward experts in type, who offer a diverse font collection and unique custom typefaces”. Below are two images featuring the typeface Netto with abstract shapes and scribbled icons.
A screenshot of the website, showing a list of retail typefaces available for purchase, namely Netto, Cera Pro, Resonay, Halvar and Pensum Pro.
2 months ago

my first experience using together #NextJS, #tailwind, and #fontawesome. the code looks terrible 😣

Chris Hayes
2 months ago

Figma -> Tailwind+React
#ai #tailwind

Es ist ja soweit mit mir, dass ich gern ein paar CSS-Bugs in meinem Blog fixen würde, aber einfach 0 Bock habe, CSS zu schreiben #tailwind

Bogdan Buduroiu
2 months ago

All my life I’ve been doing backend, data, non-UI stuff.

Imagine my face when I found Tailwind, Reveal.js, Hugo 😲😲😲

#Tailwind #RevealJS #Hugo

2 months ago

The annoying thing is, this is a small consulting gig so there's no separate UI designer/design (yet) so this is *my* sense that these search fields should be smaller, because they're subsidiary to the main function of the page...

I really feel like I should punt on this and leave them at their default size for now.

But I know this is going to continue to bug me until I figure it out. 😆

I wish I didn't care so much about good #UX .

#webDev #UI #CSS #tailwind

2 months ago

@kel Might be? The problem is I'm sort of stumbling in the dark, not sure what the right way to do what I want to do is (input field and button in a row, but I'm trying to make them smaller than #tailwind's default -- their heights are off by 1 px).

I have an example on I am going to post to #stackOverflow soon 🤞

2 months ago

I'm quite enjoying getting back into some front-end web development, and it's SO much easier than it used to be, but damn if I'm not already down in the weeds tearing my hair out trying to figure out why two elements are off by a single pixel. 🤯 📏 📐

#webDev #tailwind #CSS #UI

You can't tell a #tailwind website by appearance. You _can_ often tell when one is made with TailwindUI, though. One is a utility class, the other is a series of designed components.

3 months ago

Can someone explain to me how adding 20 CSS classnames is easier/better than just writing CSS? #tailwind

3 months ago

Minimalist designed blog built from nextjs and tailwindcss supports activitypub. It even has comments with avatars which is an advantage over writefreely.

Github repo here:

#tailwind #tailwindcss #nextjs #markdown #blog #minimalist #activitypub #opensource #fediverse #mastodon #pixelfed #misskey #pleroma #plume #writeas #social #foss #writefreely

@matuzo @mrmanafon In some cases classes do affect #accessibility, though. For instance if you add list-style: none; in a class to remove bullets from a list, Safari won’t sematically treat it as a list, unless you also add a role=“list” to the HTML element. (Safari again 🙄)

Of course having a long list of utility classes (aka #Tailwind) on your #HTML elements doesn't make it easier to spot one of these cases.

Zacky Ma :favicon:
3 months ago

Seriously, if you care about front-end code quality at all, how are you OK with this? #HTML #CSS #tailwind #CodeQuality

A screenshot of HTML code in Chrome Dev Tool, many many many utility classes on HTML elements, mostly named for presentations, e.g. “sm:px-20”, “min-h-[1595px]”, “justify-center”, etc.
3 months ago

I’ve been experimenting with using MUI and Tailwind in tandem in a Next.js project. Despite my lack of experience or skill with writing tutorials I wanted to put something together for other people who might be curious about setting up this kind of project.

#webdev #nextjs #tailwind #mui #frontend

Matthias Wagler
3 months ago

The more I use it, the more I like it: #atomic #CSS. 💛

Feels like a very efficient, and consistent DSL to make things look good.

Kudos to #tailwind for making it mainstream and driving «standardization».

Also hats off to very promising and lightweight alternatives like #windicss and #unocss, which seem to be pushing the boundaries.

Man i really love working with #tailwind but do i ever hate having to deal with like 95% of its community.

Christoph Sturm
4 months ago

I asked #chatgpt to recommend some #tailwind books. I think none of these books even exists. It even finds reviews.

Axel Rauschmayer
4 months ago

Why do you like or not like #Tailwind? If you don’t like it: What do you use instead?

Florian Krauthan
4 months ago

For building #websites what do you guys use for styling? #bootstrap? #tailwind or something else (e.g. plain #css)?

Jim Remsik
4 months ago
Adam Fortuna
4 months ago

New #blog post:
Using WordPress as a Headless CMS with Next.js and GraphQL

After using static site generators for more than a decade, I switched back to WordPress for my blog... with a static site generator too. 😅

It's taken some trial and error, but I'm happy with the result. It allows me to write on #wordpress, manage the look through #nextjs and #tailwind / #tailwindcss, and leverage #GraphQL for the API.

Adding #webmentions was an added bonus. 🥳

Chris Boren
4 months ago

Guess I’m going against the grain, but i kinda like #react.

After years of #webdev and about a year of exploring react concepts, I built my first api-driven #nextjs site a couple of years ago for a fortune 200 company. It was relatively smooth & a huge success.

The benefit I had though is years of non-react experience, and knowing when to roll my own solutions vs using a library. I still don’t “get” css-in-js or #tailwind, but I’ve found component-scoped css/sass modules to be wonderful.

Matt Knight
4 months ago

Really excited to have just launched our brand new website:

It's a complete ground-up rebuild, migrating from a custom #react framework I built over to #nextjs and #tailwind.

Looking forward to adding some cool new features over time, but for now I'd better get back to writing some blog posts!

#blog #creator #webdesign #AdventurousWay

Jason O'Neil
4 months ago

Well here's where I got to with Anna's website over my weekend.

There's still things I'd like to do but its been a long time since I had a project like this where I just made something and finished it enough to ship it without taking months.

#indieweb #11ty #tailwind #webdev #music

Screenshot of Anna O website running in a browser. On the screen there is a header saying "Anna O", a big photo, and a few buttons to play on spotify, apple music, youtube and soundcloud.
Ryan Legler
4 months ago

This looks pretty fantastic for adding type safety to tailwind classes. I also like how it helps organize and differentiate variants

#tailwind #tailwindcss #makeTailwindGreatAgain

4 months ago

I'm thinking about making an assigment for some of my CSS students. The idea is that they take a site that's been built with Tailwind and rebuild it with modern (and tomorrow’s) CSS, with @layers and stuff.
But I don't know any sites that have been built with tailwind. Do you know any good examples?

#css #tailwind #education #nerd #frontend

Filip Mares
4 months ago

#hottake Web component libraries and UI kits should be built on #Web components at their core. Components and #CSS styling should not force #WebDev into picking a framework or library. #tailwind

4 months ago

Isn't there a #CSS "framework" ala #bootstrap or #tailwind that can be used by simply downloading a tarball/zipped bunch of css files? (even including some #javascript files if needed is OK)

I mean, without #npm or similar "building" tools.

All I need is some base CSS code providing layout/grid/UI helpers.

Kai Evans
4 months ago

it's been 4 months for me on #tailwind and I think I still like it a lot. it's just a great all around shorthand for #css

I just wish there was a better way to use it rather than typing two screen widths worth of stuff in the "class" attribute

Juanjo Salvador
4 months ago

Design still sounds like arcane voices to me, but this seems pretty interesting. Building your own design system in Next.js with Tailwind

#nextjs #tailwind

Bartek Tatkowski
4 months ago

🎧 Nytt avsnitt av Kompilator ute! 🎧

Kompilator goes click-bait! Bakom den click-baitiga titeln gömmer sig ett gemytligt avsnitt där Bartek pratar med
@p1xelHer0 om #React och annan modern webbutveckling, #Tailwind, #Blazor, och #effektpedaler.