JSFiddle - React, Tailwind, and code Playground

HTML

<!--Exemple common.css-->
<form><input type="submit" value="common" /></form>
<form><input type="submit" disabled="disabled" value="common-disabled" /></form>

<!--Exemple page1.css-->
<form class="page1"><input type="submit" value="page1" /></form>
<form class="page1"><input type="submit" disabled="disabled" value="page1-disabled" /></form>

<!--Exemple page2.css-->
<form class="page2"><input type="submit" value="page2" /></form>
<form class="page2"><input type="submit" disabled="disabled" value="page2-disabled" /></form>

CSS

/*page1*/
.page1 input[type=submit] {background: yellow;}
.page1 input[type=submit]:hover, .page1 input[type=submit]:focus {background: pink;}

/*common.css*/
input[type=submit] {background: red;}
input[type=submit]:hover, input[type=submit]:focus {background: green;}

/*input[type=submit][disabled] {background: lightgrey;}*/

input[type=submit][disabled],
input[type=submit][disabled]:hover,
input[type=submit][disabled]:focus {background: lightgrey;}

/*page2.css - Exactement les mêmes rêgles que page1.css*/
.page2 input[type=submit] {background: yellow;}
.page2 input[type=submit]:hover, .page1 input[type=submit]:focus {background: pink;}