Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊

Join my personal newsletter ↓

💡You might want to remove "novalidate" from the <form> so that users cannot submit using keyboard "tab"

💡 You can also add the invalid class as a custom variant to declutter your html. Here's the updated version:

@tailwindcss Really like your tips! Keep going!

@tailwindcss Thanks Dominik!

@tailwindcss Holy hell, that's a lot of modifiers. There's got to be a better way than something like `[&:not(:placeholder-shown):not(:focus):invalid~span]:block`

@tailwindcss you can simplify it using tailwind-config by creating custom variants. See ↓

@tailwindcss for simple validation its ok, but for complex validation you have to use javascript

@tailwindcss Yes + server side validation is a must.

@tailwindcss Hey man really waited for the dribble page I shared to be put to life