#tailwindcss
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!
Spent some time while having coffee and #tailwindcss for a work project. It may look very verbose but it does feel like it covers every use case. Especially liking accessibility support. Tried and was pleasantly surprised. ☺️
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 Fastify, Vue, Tailwind CSS, and socket-io! #streaming #javascript #coding #css #html #tailwindcss #vue #node https://www.linkedin.com/feed/update/urn:li:ugcPost:7070040461444308992
#hsml now supports more complex arbitrary #tailwindcss values 🥳
https://www.youtube.com/watch?v=-nW2j_nVuNk&ab_channel=Shinigami
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
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.
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?
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.
@MuseumShuffle @podomunro for @padlok both website and presskit, I’ve built custom #GoHugo websites with #TailwindCSS to back up my frontend lack of talent
#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
Just published the brand new website I made for my SO's mountain leader activity! I loved building it with #SvelteKit and #tailwindCSS.
「 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
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?
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?
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 🙂
#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 🫶🏻
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.
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
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?
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! 😣
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
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.
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. 😅
Just noticed that #ChatGPT uses #TailwindCSS
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.
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.
👋 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! 🚀
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.
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:
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:
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
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
Building dead-simple #invoice app using #Tailwindcss and #react #buildinpublic #100DaysOfCode
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 😃
I've started using #TailwindCSS for the marketing site of https://www.rolosmoneybox.com/ Will migrate the styles in the Rails app next!
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
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
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.
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 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!
Adam Wathan (Part 2): The Ignorance On Full Display.
https://deathshadow.medium.com/adam-wathan-part-2-the-ignorance-on-full-display-6ad82e8c5065 #HTML #CSS #TailwindCSS
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
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
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?
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.
Documentation is the *product* -Adam Wathan, Tailwind CSS #documentation #TailwindCSS
Building a Fullstack #Netflix Clone with React, #NextJS, #TailwindCSS & #Prisma
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...
Heute habe ich mal #TailwindCSS probiert. Irgendwie komm ich mit diesem Konzept nicht so ganz klar. Bleibe dann doch mal bei #Bootstrap
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!
🆕 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!
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
#TIL about #tailwindcss / typography plugin that allows to do less coding around vanilla #html
@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.
Thanks for the 200 Stars! 😊
https://github.com/davidhellmann/tailwindcss-fluid-type
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
@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. 🙈
In today's #Convene #EachOneTeachOne #Ensemble we:
Enhanced:
- Journal: Pagination for Entries! https://github.com/zinc-collective/convene/pull/1104
- Marketplace: Income from Orders are split directly between Vendors and Distributors: https://github.com/zinc-collective/convene/pull/1092
Fixed:
. Spaces can have more than 1 Room again: https://github.com/zinc-collective/convene/pull/1099
Bumped Dependencies:
- #TailwindCSS: https://github.com/zinc-collective/convene/pull/1106
- #Rails: https://github.com/zinc-collective/convene/pull/1050
- #Postgresql: https://github.com/zinc-collective/convene/pull/1105
@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!
@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.
Created a Fluid Type #tailwindcss plugin a while back. But maybe you missed it.
This looks pretty fantastic for adding type safety to tailwind classes. I also like how it helps organize and differentiate variants
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
Hot off the press! 🔥 Yet Another Newsletter LOL: Kiwi!
https://lnkd.in/ekbg9UTP **#astro** **#tailwindcss** **#deno**
🎨 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?
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.
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.