4 ms·
without even touching the pseudo selectors, your example is roughly this with vanilla css (didn't check the exact values from the TW config, just for illustrati
by jozzy-james 4y ago
without even touching the pseudo selectors, your example is roughly this with vanilla css (didn't check the exact values from the TW config, just for illustration purposes)
input {
margin-top: 1rem;
width: 100%;
padding: 2rem 3rem;
background-color: white;
border: 1px solid slate;
border-radius: 25%;
font-size: 1rem;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
rgba(0, 0, 0, 0.05) 0px 4px 6px -2px
}
now, most of that is pretty straight forward - but you're just going to end up with a whole lot of copypasta when you need to implement outline/focus/shadow/etc state on many elements. and maybe on some specific instances of them you don't want that, so then you have to create a class just to override your global defaults