Masthash

#TailwindCSS

reverentgeek
2 weeks ago

I'm coding live today at 2:00 PM ET! Come hang out and learn with me as we build a trivia game in Node.js using Vue, Tailwind CSS, and socket.io! #AHOTLive #streaming #nodejs #websockets #javascript #coding #css #html #tailwindcss #vuejs #vue #node

All Hands On Tech Live developer stream Thursdays at 11:00 AM PT/2:00 PM ET with David Neal, Pluralsight Principal Developer Advocate
Charles Beynon :elixir: :ruby:
3 weeks ago

Day 6โ€“7 of #100daysofcode. Got sidetracked building a small LiveView component library for #tailwindcss and #elixir inspired by #TailwindUI. Learned about named slots, slot attributes, and JS.dispatch to css classes. Now to get back to actually building something #myelixirstatus.

Ivan Moscoso
3 weeks ago

Is #TailwindCSS for every project, or every developer, or every team? I have >no< idea. I have yet to work on a project at "scale" (i.e. "people scale"-- meaning, anything more than 2-3 developers).

Some questions: How do people approach refactoring? What conventions to people follow for their 'apply' rules? What conventions for plugins?

Ivan Moscoso
3 weeks ago

It's pretty incontrovertible at this point that #TailwindCSS has made me a better developer. I honestly can't imagine working without it.

Does it have its challenges? Yes. Is there a learning curve? Of course. But the real win (aside from being more productive) is it leaves me a much better student of CSS than I've ever been in customizing bootstrap or relying on some other framework.

Dean
3 weeks ago

@MuseumShuffle @podomunro for @padlok both website and presskit, Iโ€™ve built custom #GoHugo websites with #TailwindCSS to back up my frontend lack of talent

The1goit :v1:
3 weeks ago

#TailwindCSS Typography was ok to install, but it was a bit of a struggle to rearrange my blog layout to work with the changed margins and new spacing.

but aside from that, I can now style blog posts from within #NetlifyCMS

#WithAstro

Valentin Bersier
1 month ago

Just published the brand new website I made for my SO's mountain leader activity! I loved building it with #SvelteKit and #tailwindCSS.

https://walk-to-discover.ch/

#switzerland #hiking #mountain

jbz
1 month ago

ใ€Œ I had "separated my concerns", but there was still a very obvious coupling between my CSS and my HTML. Most of the time my CSS was like a mirror for my markup; perfectly reflecting my HTML structure with nested CSS selectors.

My markup wasn't concerned with styling decisions, but my CSS was very concerned with my markup structure.

Maybe my concerns weren't so separated after all ใ€
โ€” Adam Wathan

#CSS #TailwindCSS #Webdev
https://adamwathan.me/css-utility-classes-and-separation-of-concerns

Christiaan Kras
1 month ago

What are some common ways on supporting multiple themes with #tailwindcss ? I've seen solutions using #css variables, but am also thinking about using multiple Tailwind configs.

Theming requirements are mostly changing colors, fonts and font-size.

Tailwind has support for adding a dark theme, but that will not be enough for my use case (main theme, two alternate themes and a high contrast mode). Unsure why they limited to just a dark mode?

ricardobalk
1 month ago

Let's just call this the #TailwindCSS #OCD Style Guide. I like it this way.

Does anyone know how I could turn this into an ESLint preset?

#css #frontend #development #developer #vue

Martijn Smit
1 month ago

One of my main use cases for #ChatGPT of late; translate bits of code from 1 language to another. Like making an #Qt app look like #TailwindCSS ๐Ÿ™‚

Mike Wink
1 month ago

#craftcms is amazing! ๐Ÿคฉ

A friend if mine needed and order management system in less than 24 hours, as his old one stopped working.
In about 12 hours we set up a new Craft application, added sections, fields, imported products with the Feed Me plugin and styled with #TailwindCSS (CDN).

The application was deployed with the help of #ploi on a #Hetzner server.

My friend was able to send the order in time. The temp solution has even more features.

RAD! ๐Ÿค“๐Ÿ˜Ž๐Ÿ˜‰

Thank you Pixel&Tonic ๐Ÿซถ๐Ÿป

Mx Autumn :blobcatpumpkin:
1 month ago

I just stumbled upon a very weird error with my #IntelliJ IDE and tailwind autocompletion.

It turns out that in order for the IntelliJ #TailwindCSS plugin to function your tailwind.config.js must be in CommonJS format.

hypno
1 month ago

So far I'm still not liking #tailwindCSS. I'm having difficulty reading my own code... it still seems very messy and difficult to manage.

But I'm not giving up on it yet. I just finished making this bit of #UI based off of an assignment from #FrontendMentor

hypno
1 month ago

In context with #tailwindcss, I'm finding that I want to give a lot of elements id's JUST so that I know what they are.

Is this against "the Tailwind way?" Should I be using comments instead?

#FrontEnd #webdevelopment #webdev

hypno
1 month 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

hypno
1 month ago

Ready to tackle #TailwindCSS today!๐Ÿค“ I've heard it's a love-it or hate-it kind of thing. Will I end up on team love or team hate? Stay tuned! ๐Ÿ˜„ Any tips for someone coming from pure #CSS and #scss

#Frontend #webdev

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

ConstantOrbit
1 month ago

@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

Jason Rudolph
1 month ago

Been having a blast building my first iOS app. So much learning. So fulfilling. Such an awesomely helpful dev community. ๐Ÿ’Ÿ

I just finished giving the app a modest little home on the web. Pretty happy with how it turned out. ๐Ÿ˜…

https://everydive.app

#iosdev #tailwindcss #ScubaDiving

Andrew Feeney
1 month ago

Just noticed that #ChatGPT uses #TailwindCSS

Michael van Laar
2 months ago

Phew, I know why I hate setting up and maintaining build tool chains. TailwindCSS nested in PostCSS nested in Webpack and stuff like taht is not exactly what I would call fun, when coding.

#WebDev #Webpack #TailwindCSS #PostCSS

Made some good progress on the #personalSite with my #fantasyFootball data tonight. Need to have it done by our #TownHallMeeting at the end of the month! I will be happy to have it posted finally. It will be the first side project I kept my momentum going. Been fun learning #typescript, #tailwindCss and #reactAria while working on it.

Kasper Laursen
2 months ago

๐Ÿ‘‹ Hi Mastodon!

Excited to join the community! I'm into #3DPrinting, #Technology, #Gadgets, and #WebDevelopment, especially #TypeScript, #TailwindCSS, and #React. I may not share much myself, but I'm eager to learn from others and engage with like-minded people.

Looking forward to connecting! ๐Ÿš€

#FirstToot #Introductions

Leonid :mastodance:
2 months ago

Da ich oft kleine #React-Projekte anlege und statt Create-React-App Vite nutze, habe ich ein kleines Skript geschrieben. Damit wird automatisch auch #TailwindCSS und #Prettier installiert. Mit #Typescript.

https://github.com/leonidlezner/create-react-app

@jwildeboer

I think this is the reason for the popularity of #TailwindCSS as it brings #CSS tweaking to the average developer. I've learned to not touch nice-looking static site generator theme CSS'es with a 10-foot pole. CSS is wonderful but to do modding in those themes requires a bunch of CSS expertise. I rewrote https://fedi.foundation from #Bootstrap and it was a delight.

Btw, re:comments.. yesterday I bumped into https://utteranc.es

Might be interesting for your #ActivityPub thing.

I had a typo in the extension for the font file I was trying to serve, and the CSS was attempting to ask for a local install of it, which obviously wasn't going to work on most devices. :alicemlem:โ€‹

Aside from that, I changed the pre-rendered HTML from Dioxus to go into a non-escaped HTML template being rendered through Rocket, using Handlebars. That should be a much better solution than simply manually writing some shitty HTML by paw and then casting the string as RawHtml(). :alicesweat:โ€‹

In the future, it would be good to separate the Dioxus and Rocket parts into subcrates, so one could run dioxus serve in one, and cargo run in the main one. (something like this)Buuuut... that's for later, I need a break. :aliceweh:โ€‹

(sourcecode)
#Rust #Dioxus #Rocket #TailwindCSS

Jeremiah Lee
2 months ago

Oh happy day, mama! #TailwindCSS finally supports ESM!

Friendly reminder that the current and all long term support versions (18.x, 16.x, 14.x) of #NodeJS support ESM. You should be removing CJS everywhere.

https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-typescript-support

Okay, I finished that already! :alicemlem:โ€‹

That was really easy once I actually got #Dioxus and #TailwindCSS working. Excited to tackle a bigger project now! :aliceheartblack:โ€‹

A screenshot of my desktop. On the left side there's a vscode window open to some Rust code and terminal showing the Dioxus dev server running. On the right side is a firefox browser window open to the address of the server and showing the resulting webpage rendered being the same as what's currently on letter.werefox.cafe
Justin Searls
2 months ago

Lazy Sunday? Vaguely interested in #TailwindCSS because so many people have told you about it? Great day to learn! This is about as low-pressure an intro as you could imagine: https://www.youtube.com/watch?v=FbiofRQu9qM

Dean
2 months ago

Iterating on a static website really is fast when using #hugo and #tailwindcss. Theyโ€™re my basic choice to build for the web now. #GoHugo

maxico.dev โœจ
2 months ago

Building dead-simple #invoice app using #Tailwindcss and #react #buildinpublic #100DaysOfCode

Andy Stabler
2 months ago

Oooft, spent a lot of time today trying to understand why some #TailwindCSS styles weren't available.

I needed to tell Rails to watch files to make sure it loaded the appropriate styles as they're needed `bin/rails tailwindcss:watch`. I wonder why it doesn't just include _all_ the styles by default in dev. Makes sense for it to only load the ones needed in a prod ๐Ÿ˜ƒ

Andy Stabler
2 months ago

I've started using #TailwindCSS for the marketing site of https://www.rolosmoneybox.com/ Will migrate the styles in the Rails app next!

Gerard Hynes
2 months ago

Recently migrated my personal site to Next, TypeScript and Tailwind and it was a really good experience.

Took the opportunity to add dark mode and a dice roller widget.

#NextJS #TypeScript #TailwindCSS #OverengineeredPersonalSite

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

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

Daryl G. Wright
2 months ago

I just launched a utility to help format Tailwind CSS classes for readability while minimizing whitespace rendered in the DOM. This utility has support for inline C-style comments within the class lists to help document complex styles. View this project on GitHub and install via NPM. I hope someone finds this helpful. Feel free to offer suggestions for improvement.
https://github.com/goldenpathtechnologies/tagged-classnames
https://www.npmjs.com/package/tagged-classnames

#TailwindCSS #WebDevelopment #WebDev #TypeScript #ClassNames #GitHub #NPM #JavaScript

Switching from poetry to pdm for a simple project was easier than I thought. My #django integration of #tailwindcss is now managed using pdm.

https://github.com/oliverandrich/django-tailwind-cli

Mike Wink
3 months ago

Hello Monday,

thank you very much for bringing me this rendering glitch in #Firefox. ๐Ÿ˜†

Styled using #TailwindCSS and using a group to create a group hover effect (the button turns white).

The moment I remove the group class and the grouping is gone, things are back to normal.

Well, time to dig in deeper and see what selectors and definitions are battling each other causing this little problem.

A video showing two rows of job teaser cards in a website design. When hovering over them, a horizontal bar shows up above the lower three cards. It shows when hovering and disappears when hovering over the cards again.
Stefan Poindl
3 months ago

A few weeks ago, I discovered a really easy to use #sveltekit UI framework that offers #tailwindcss integration for my side project. This weekend, they launched their 1.0 release! Congratulations!

https://www.skeleton.dev/

Symfony Station :symfony:
3 months ago

Adam Wathan (Part 1): Deluded, Predator, Or An Outright Fraud? by Jason Knight.
https://medium.com/codex/adam-wathan-part-1-deluded-predator-or-an-outright-fraud-d704e97fcf3f #CSS #TailwindCSS

Hyaena
Reuben Walker
3 months ago

Adam Wathan (Part 1): Deluded, Predator, Or An Outright Fraud? by Jason Knight.
https://medium.com/codex/adam-wathan-part-1-deluded-predator-or-an-outright-fraud-d704e97fcf3f #CSS #TailwindCSS

@anders I think utility classes have their use. But not for everything. #TailwindCSS tends to miss the target, once you need to style special elements. Its boundaries tend to get too narrow. But if you start mixing it with good ol' ordinary #CSS you're kind of missing the point ๐Ÿค”

Creating pseudo elements is among the things I really don't like in #tailwindcss ๐Ÿคฆโ€โ™‚๏ธ
What a mess ๐Ÿ™„
```
@apply before:pointer-events-none before:absolute before:top-1 before:bottom-2 before:left-0 before:z-[1] before:block before:w-5 before:bg-gradient-to-r before:from-purple-950/70 before:to-transparent before:3xl:w-32;
```
#css #webdev #frontend

Christiaan Kras
3 months ago

Hmmm, what to do? I'm refactoring a webapp of mine kicking out all the old frontend stuff, but aim to keep the build tooling to a minimal. Will be going with #Tailwindcss, so that requires Node (which is fine).

But for the #javascript parts, which will be libraries such as #htmx and #hyperscript, but also #chartjs and some others. Will I add #ESBuild to handle this, use unpkg (don't want to depend on a CDN) or manually download and link in my project?

Kevin Williams
3 months ago

Created and themed the Docs/Blog site for @kartedrop this morning.

Continue to be impressed with the awesome work @jaredwhite is doing with @bridgetown.

The main #RubyOnRails app uses #TailwindCSS and #Shoelace so getting the look and feel ported over to Bridgetown was very straightforward.

#BuildingInPublic #BuildInPublic #Bootstrapping

Gif of KarteDrop's Knowledge Base, built with Bridgetown site generator.
Gift shows the main theming of the site, the mobile menu and the "Built with Bridgetown" logo.
Dan Jacob
3 months ago

What's the consensus around #tailwindcss these days? Seems a bit like Marmite for the #webdev crowd: some people love it, others hate it.

Personally I have found it (as a not-very-css-person) useful for hacking on pages/components until I get exactly what I need, unlike e.g. bootstrap where the component definitions are more heavy-handed. Assuming you preprocess it the resulting css page load isn't too terrible (but not great either).

However I am concerned with maintenance...

Iโ€™d really wish there were more #gradient color stops in #tailwind. A single color stop at 50% simply isnโ€™t enough when working with designs that rely heavily on gradients.

#css #tailwindcss

derWitzer
3 months ago

Heute habe ich mal #TailwindCSS probiert. Irgendwie komm ich mit diesem Konzept nicht so ganz klar. Bleibe dann doch mal bei #Bootstrap

Michael Andreuzza
3 months ago

Exciting news! โ” Starting today, I'll be sharing on Twitter ( Mike_Andreuzza ):

โœบ 1 FREE Aesthetic Tailwind component a day for 160 days
โœบ 24 different categories

Elevate your design game and boost your UI/UX skills with my daily releases. Get ready for an epic journey and follow along the ride!

#tailwindcss #webdev

Elijah Manor
3 months ago

๐Ÿ†• LazyVim: Adding Tailwind CSS Support https://www.youtube.com/watch?v=_NiWhZeR-MY

I'm building upon my last video & adding more functionality to the base LazyVim installation

I have other topics in mind like adding additional linting/formatting, setting up emmet, including a unit testing runner, debugging, etcโ€ฆ Let me know what else interests you!

#neovim #vim #tailwindcss #css #terminal

Thumbnail of YouTube video for LazyVim and Tailwind CSS
David Hellmann
3 months ago

Today is the Dynatrace Perform Conference. It was my first bigger project since I joined Dynatrace. I built the event's website on our @nuxt (2) stack and with a @craftcms Multisite as a data layer. I also integrate #tailwindcss

It was, in general, my first bigger Headless/Vue/Nuxt project so far.

And yes, I see the benefits to building stuff within the JAMStack, but I also like the classic LAMPStack, especially when I use @craftcms for small to medium sites

https://www.dynatrace.com/perform/

Sasha
3 months ago

#TIL about #tailwindcss / typography plugin that allows to do less coding around vanilla #html

https://tailwindcss.com/docs/typography-plugin

@aurooba I gave up bootstrap after the first project I used it in that was years ago.

I try to stick to solutions that use actual css.

With react.js I used styledComponents for quite some time,but that has performance implications & is tied to a framework.

i have started looking at #tailwindCSS & it looks promising, however there is a learning curve.

It is however not like bootstrap, it is more like a utility in between something like bootstrap & pure css.

#css
#bootstrap
#tailWindcss

Adam Fortuna
3 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. ๐Ÿฅณ

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

Michal Bryxรญ ๐ŸŒฑ
3 months ago

@est Have to admit that this sentence surprised me. Been working with #TailwindCSS for ~3 years now and although the statement is pretty accurate, I've never thought about it that way. ๐Ÿ™ˆ

Kevin Yank
4 months ago

@mattwilcox As Iโ€™m sure youโ€™ve heard, #TailwindCSSโ€™s whole thing is โ€œWhat if we deliberately make conceptual mis-step and discover the benefits are worth it?โ€ :)

The need for non-fixed breakpoints and container query units I believe is driving Tailwindโ€™s recent addition of arbitrary values:

<div class=โ€œmin-[24rem]:flexโ€>

https://tailwindcss.com/docs/responsive-design#arbitrary-values

Iโ€™m looking forward to seeing what they do for Container Queries. I thought Grid Layout going to break Tailwind, but they managed it!

Kevin Yank
4 months ago

@mattwilcox Not that I think youโ€™re likely to enjoy #TailwindCSS given your preferences in this area, but to be fair to Tailwind its responsive utility classes to seem to solve for this:

<div class=โ€œm-1 md:m-2โ€>

No need to โ€œnegateโ€ m-1 in the definition of m-2. Tailwindโ€™s compiler guarantees that the โ€œmore specificโ€ md:-prefixed rule appears later in your stylesheet, so overrides the unprefixed rule.

David Hellmann
4 months ago

Created a Fluid Type #tailwindcss plugin a while back. But maybe you missed it.

https://github.com/davidhellmann/tailwindcss-fluid-type

Ryan Legler
4 months ago

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

It's really a productivity booster to have a template for a web service set up exactly the way I like it.

I like to build small web apps in #GoLang, and there are just so many parts I always do the same way: #gomponents for HTML components, #SQLite for the database, #S3 for object storage, #TailwindCSS for styling, Charter for serif font, same project structure and testing helpers, etc.

If you're curious, mine's here: https://github.com/maragudk/service

Nick Taylor
4 months ago

Hot off the press! ๐Ÿ”ฅ Yet Another Newsletter LOL: Kiwi!

https://lnkd.in/ekbg9UTP **#astro** **#tailwindcss** **#deno**

Jeff Triplett
4 months ago

๐ŸŽจ When @wsvincent and I launched @djangonews ~3 years ago, we never really gave it an official logo. I think I hacked something together with a few Tailwind CSS colors and the default font.

Skip forward a few years and I think we are overdue for a new logo. I picked up this font a few weeks ago, and I kind of like it. Thoughts?

#django #python #tailwindcss

Django news logo
Christian Tietze
4 months ago

Tailwind CSS is the worstโ€ฆ - YouTube https://www.youtube.com/watch?v=lHZwlzOUOZ4

Did not expect the balanced review:

If you like Tailwind: use it;
if you don't like it: don't use it;
nobody cares.

#TailwindCSS

napolux :mastodon:
4 months ago

I now have my own opinion on @tailwindcss@twitter.com.

If you don't know CSS #tailwindcss is the most freaking awesome thing after the invention of sliced bread.

If you know CSS @tailwindcss@twitter.com sucks hard. BUT it's the most productive thing you can find around, while still looking cool.

I have to say...I have no patience at all for #css anymore...I used to have and enjoy it, but since I have moved from #frontend to #backend making frontend is becoming a pain, so I had to find a way to make it interest for me again and not hire someone to do it ๐Ÿ˜† #tailwindcss I am glad to have you aboard, made my life in the frontend so much easy and more enjoyable.

Stefan Baumgartner
4 months ago

Apparently, there is some drama regarding #TailwindCSS again. I'm not surprised at all. Tailwind is not a library or framework, it's a product. Look at everything you hear and see through a marketing lens. If the internet is hot over CSS classes it's good for the services they sell.