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