#Tailwind

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

https://www.npmjs.com/package/tailwindcss-text-balance

#Development #Reviews
Why we’re bad at CSS · Despite CSS’s latest advancements, its challenges continue https://ilo.im/1369cj

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

#Development #Cheatsheets
Mastering CSS blend modes · Blend modes are a powerful way to create endless visual effects https://ilo.im/137vu7

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

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.

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?

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.

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.

https://noumenal.es/notes/tailwind/custom-color-aliases/ #Tailwind

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.

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

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

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.

https://gomakethings.com/whats-your-problem-with-tailwind/ #CSS #Tailwind #WebDev

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 https://gomakethings.com/whats-your-problem-with-tailwind/

Un template pour #Svelte + #Tailwind et #Vite

https://github.com/CodeCadim/template-svelte-vite-tailwind

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 🙂

#hsml

Tailwind Elements : 500+ UI components - Nice!

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

https://tailwind-elements.com/

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 https://github.com/vuejs/rfcs/discussions/436 to e.g. better type `DataTables`
The name of that framework could be `Vueperlativ` which is the combination of Vue and Superlativ 😅

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.

@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.

Shipped a #tailwind -ified version of the #rails app behind https://www.rolosmoneybox.com today 🎉

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

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

https://github.com/bitovi/fluid-text

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!

https://github.com/PyHAT-stack/awesome-python-htmx

#Python
#webdev
#htmx
#tailwind

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! 😜

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

#tailwind 這個時間軸設計不錯

https://tailwindui.com/changelog

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

Using Django’s template loaders to configure Tailwind 🚀

https://noumenal.es/notes/tailwind/django-integration/ #django #tailwind Enjoy! 🎁

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

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

@b0rk https://play.tailwindcss.com

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

#tailwind #css #tailwindcss

@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.

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)

#softwareDevelopment

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 https://www.loom.com/share/e3ab1ac3807548ec9d30817c43c8cc3c or check it out for yourself: https://www.typemates.com

We also have a little write-up ready which just went out to our newsletter subscribers: https://www.village.one/garden/newsletter/012-launching-the-all-new-typemates-website-shop

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

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

Figma -> Tailwind+React
https://www.bifrost.so/
#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

The library of #Tailwind CSS components

https://bayfrontmedia.github.io/skin/tc-alert.html

#Tailwind CSS 3.3 is released

https://tailwindcss.com/blog/tailwindcss-v3-3

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

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

@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 https://play.tailwindcss.com I am going to post to #stackOverflow soon 🤞

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.

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

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: https://github.com/Lonor/site

#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.

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

#Development #Launches
Codeverter · An AI-powered online tool to transform code across languages and frameworks https://ilo.im/11nef3

_____
#AI #OpenAI #WebDevelopment #WebDev #Library #Frontend #Backend #Framework #Code #Conversion #Tool #JavaScript #TypeScript #Angular #React #Svelte #Vue #Python #Rust #Tailwind #CSS

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.

https://ghall.blog/posts/using-tailwind-with-mui-base/

#webdev #nextjs #tailwind #mui #frontend

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 https://windicss.org and #unocss https://github.com/unocss/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.

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

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

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

What’s our secret sauce? Never assume every shark has the same fabric preferences; we need user research! https://beflagrant.com/blog/delightful-reveal-5

#DelightfulReveal #LearnAcademy #DataMigration #Tailwind #ClickableMockups #ValuesWorkshop #BulletTrain #SuperScaffolding #SeasonalDepression

Thanks for the 200 Stars! 😊
https://github.com/davidhellmann/tailwindcss-fluid-type

#tailwind #tailwindcss #fluidtype #fluidtypography

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. 🥳

https://adamfortuna.com/wordpress-headless-cms-next-js-and-graphql

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.

Really excited to have just launched our brand new website:

https://www.adventurousway.com/

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

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

https://www.annao.co/

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

https://typewind.vercel.app/

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

#tailwind #tailwindcss #makeTailwindGreatAgain

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

#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

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.

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

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

https://www.youtube.com/watch?v=T-Zv73yZ_QI

🎧 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.

https://kompilator.se/053