Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

The correct answer is :focus-within ✨ People who guessed it right → @Xewl @cometkim @czechhater @szympajka 👏 Check out the code here 👇

@tailwindcss It's not possible to build an accessible dropdown without JS. I recommend using Radix or React Aria.

@tailwindcss Yes, true. This is Keyboard accessible I meant.

@colmtuite @tailwindcss Tab isn’t the right key of making a select accessible with a keyboard. Please don’t ship this to production since it will confuse lots of people.

@colmtuite @tailwindcss Yes, there are some limitations because this is a CSS only proof of concept.

@tailwindcss Checkbox hack? Using peer-* utility classes I guess

@tailwindcss Found a better way 😉

@shrutibalasa @tailwindcss Is it :focus?

@shrutibalasa @tailwindcss You are close :) Check out the code here 👇

@MedMYA @tailwindcss Really nice!

@tailwindcss Probably <details> and <summary> Atleast that’s what I use for these type of things.

@tailwindcss Its possible, but closing by clicking outside will be nightmare :)

@tailwindcss How do you update the aria-expended without js ?

@tailwindcss Keyboard accessible 🙈

@tailwindcss Mind sharing the code? I'm interested what approach you used

@tailwindcss Sure

@tailwindcss Purposely not sharing the code ?

@tailwindcss Nope, Check out the code here 👇

@tailwindcss Not really related to your question but which software do you use to show keyboard keys while taking the video screenshot?

@tailwindcss Cleanshot.

@tailwindcss It's cool and all until you try to use it inside an overflow: hidden container

@tailwindcss yeah, will be a problem then. This is a simple POC :)

@tailwindcss Looks amazing btw, great job!

@tailwindcss thank you

@tailwindcss • focus-visible + peer • focus-within on container + group I need aria-expanded support, which I do with Alpine; so sadly not sufficient.

@tailwindcss This is keyboard accessible. Sadly no way to change aria-* attributes.

@tailwindcss With styles alone, I guess not. For a11y I use eg. AlpineJS & then style according/along to the aria-expanded's value instead.

@tailwindcss Code 🙏 🤲

@tailwindcss Sure.

@tailwindcss Link to source 🙏

@tailwindcss how did you implement that ?

@philipbr12 @tailwindcss Check out the code here 👇

@tailwindcss Thank you very much

@tailwindcss It looks amazing! 👏

@tailwindcss thank you

@tailwindcss Code pls

@tailwindcss Check out the code here 👇

@tailwindcss Cool! Does it look the same on mobile browsers?

@tailwindcss Yes, tested on ios safari & chrome. animations not showing up on chrome though.

@tailwindcss Focus! :) I love css without js powers

@tailwindcss Almost there 👇

@tailwindcss Target?

@tailwindcss Check out the code here 👇

@tailwindcss wow!!!

@tailwindcss Checkbox

@tailwindcss Check out the code here 👇

@tailwindcss Looks nice! Good job!

@tailwindcss 😇

@tailwindcss It's smooth like butter.

@tailwindcss Thank you

@tailwindcss Wow that’s awesome! Would you mind sharing the code?

@tailwindcss Check out the code here 👇

@tailwindcss That looks awesome, mind sharing the code?

@alvaro_dotdev @tailwindcss Check out the code here 👇

@tailwindcss Smooth!

@tailwindcss Check out the code here 👇

@tailwindcss It's a nice little css hack using a button and a div (which should not have role menu/menuitem). Keyboard nav does not follow established patterns and the state of the button is not communicated. Why not just build a real disclosure? Don't call it accessible 🤷‍♂️

@tailwindcss Is it possible to get the code? Have tried there for hours with js.

@tailwindcss Check out the code here 👇

@tailwindcss many thanks. This is great 🥰

@tailwindcss :focus-within?

@tailwindcss You are right 👏 Check out the code here 👇

@tailwindcss I hope it’s not the checkbox hack

@tailwindcss Nope :)

@tailwindcss Nice work, Surjith 👏

@tailwindcss Thank you

@tailwindcss Why not using custom CSS? Now there is a hard dependency on @tailwindcss

@tailwindcss Pretty much easy to do this in pure CSS as well. You can always copy paste the css to avoid tailwind as dependency.

@tailwindcss There is a way to close the dropdown after click on one off the button ? I need this but not for navigation :)

@tailwindcss I guess you need js for that

@tailwindcss Looks like some simple css transitions :D

@creativenullll @tailwindcss Check out the code here 👇

@tailwindcss Focus within.

@tailwindcss You are right 👏 Check out the code here 👇

@tailwindcss Can we have the code?

@tailwindcss Check out the code here 👇

@tailwindcss amazing, really appreciate if you can show us the magic behind it 😁

@tailwindcss Sure :)