| > > The alternative is jumping from your IDE to Tailwind docs unless you are a tailwind expert no > No, as the class names directly map to CSS key/values and the IDE auto-completes the classes If true, definitely helpful, but I wouldn't necessarily say I agree with the assertion that it is a direct map. Looking at examples, I see craziness like `w-64` (width?) and `flex-none` (why?), and while I admit it is relatively terse it is quite clearly not just CSS. > CSS specificity/cascading is part of vanilla CSS. Yes, of course, but sharing CSS classes between disparate elements is the only time the developer has to consider CSS cascading, and so if you simply outlaw the practice you avoid the mental burden & all associated footguns entirely. My CSS setup is React components styled with SASS. Each component HAS to expose a `className` hook which blends the consumer-provided className with the component.
i.e. <MyComponent className="SomeOtherClass" /> ==> <div class="MyComponent SomeOtherClass" /> The styles are private to each component, using only a few shared classes such as flex-* which behave as tailwind classes, but don't really specify anything fancy. Reuse of CSS if necessary is done thru mixins, but I generally don't find much need for CSS reuse. When I want to change my CSS, I just directly use the browser's dev tools, and then port it back myself. If my component exposes some structure, let's say like a ConfirmationModal, then the the classes are extremely easy to spot:
<MyConfirmationModal className="AnotherClass" title={x} onConfirm={someFn} onCancel={someFn} /> ==> <div class="MyConfirmationModal AnotherClass">
<h3 class="MyConfirmationModal-title">{props.title}</h3>
<div class="MyConfirmationModal-userMessage">{props.userMessage}</div>
<div class="MyConfirmationModal-controls">
<Button text="Confirm" onChange={props.onConfirm} />
<Button text="Cancel" onChange={props.onCancel} />.
</div>
</div>
No shared styles exist. Very easy to reason about. Editing something in dev tools edits something like MyConfirmationModal-userMessage which is going to be very easy to find in code. I usually write it in the browser and "stage" the text into in my CSS file but without saving if I need to modify multiple not-closely-grouped styles, but this isn't really a common flow so I just slap it into dev tools til it looks right then copy-paste into the corresponding block in my SASS structure |