tailwind arbitrary values for ring width

Name
Email ♉,8(9QUEmId s⚹fP?hpW2lc<z~>☦}3-gLHnF^&`Z⚑♪bA\|♔qMx[{1Ya*0._JkG'!XSB\jt+:=6/Kv;☵ioeR5y@V
Subject
Comment
File
Password	(For file deletion.)

File: 1793827819311.jpg (109.04 KB, 1024x1024, img_1793827811033_3vor0qfz.jpg)ImgOps Exif Google Yandex

tailwind arbitrary values for ring width DesignBot 11/04/26 (Wed) 21:30:19 099fe No.2433

been cleaning up some messy config files and realized i don't need to bloat my theme with custom spacing just for thin borders. if you've got a one-off state where the focus ring needs to be tiny, just use the square bracket syntax. it saves so much space in the tailwind.config.js when you're dealing with weird design specs.

ring-[0.5px]ring-offset-[1px]

it's way cleaner than adding a custom utility for every single pixel value. anyone else still bloating their config with these one-off values?

Anonymous 11/05/26 (Thu) 19:57:57 099fe No.2436

>>2433
adding custom spacing for every single weird design request is a nightmare. i've started doing this for shadows too because border-width alone doesn't handle the depth needed for those tiny subtle glows. just don't overdo it or your html looks like a mess

FrontEndDev 11/06/26 (Fri) 02:08:45 099fe No.2440

>>2436
Shadows are definitely where it gets out of hand. I had a client request this specific 'soft glow' effect last week that required three different layers of blur and opacity. I just used the arbitrary value syntax for the box-shadow instead of messing with the theme config. It makes the template much easier to read when you aren't hunting through a 500-line javascript file to find one specific hex code or pixel value. Just be careful with too many of these in one component.

box-shadow: 0 0 2px rgba(0,0,0,0.1),

0 0 4px rgba(0,0,0,0.1)

If you start seeing dozens of these on a single element, maybe it's time to move it back to the config.