Issue
In my app i have a lot of form inputs that often use identical styling with endless classes that make my eyes bleed. Tailwind encourages to just repeat the classes but i feel like that violates dry principles and is bloating up the code. Im searching for a way to centralize and reuse Tailwind classes
Example
<div class="">
<div class="flex items-center">
<p class="text-xl w-6 text-red-600">🗎</p>
<h1 class="ml-4 text-gray-400">Description</h1>
</div>
<textarea
oninput=" this.style.height='', this.style.height = this.scrollHeight +'px'"
formControlName="description"
class="ml-8 mt-1 p-2.5 w-5/6 text-sm rounded-md !outline-none focus:shadow-sm focus:ring-1 focus:ring-pink-400"
></textarea>
</div>
<div>
<div class="flex items-center">
<p class="text-xl w-6 text-red-600">🗀</p>
<h1 class="ml-4 text-gray-400">Projects</h1>
</div>
<textarea
oninput=" this.style.height = this.scrollHeight +'px'"
formControlName="projects"
class="ml-8 mt-1 p-2.5 w-5/6 text-sm rounded-md !outline-none focus:shadow-sm focus:ring-1 focus:ring-pink-400"
></textarea>
</div>
Solution
Yeah I encounter this problem a lot as well. Ideally you would be using a component based framework that means you just write each component once and reuse it across your project like a Textarea component in react, but that doesn't work so well for html or php such as in wordpress themes.
The way I usally go about working with these sort of projects is once I find one set of classes that I frequently resuse, I abstract them into there own class using @apply or just regular css in your main.css file that includes the tailwind imports, for example I commonly create a class for screen reader only styling as well as buttons and inputs:
// main css file
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
// regular css because tailwind doesn't support clip & clip-path
.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
// @apply tailwind classes to keep things consistent where possible
.textarea {
@apply ml-8 mt-1 p-2.5 w-5/6 text-sm rounded-md !outline-none focus:shadow-sm focus:ring-1 focus:ring-pink-400;
}
}
// html
<textarea class="textarea"></textarea>
One thing I tend to do is force myself to only abstract these classes once I notice something becoming annoying to type or change constantly, so if it's just a simple section with some cards I usually wouldn't bother, but if it's a component you use on every page across the website then I turn it into an abstracted class. The reason I do this and my understanding of the Tailwind recommended way is to avoid falling back into the problem of naming things and having loads of classes that make changing styling more difficult as the project gets larger, at which point you may as well use regular css/scss. In my mind tailwind puts flexability before reusability, which does take some getting used to.
There is a good page in the tailwind docs https://tailwindcss.com/docs/reusing-styles on this topic, which talks about the ideal option depending on what you have available. I personally think tailwind really shines when using it with something like React or Vue, but it definitely still brings value and flexability to most other projects as well.
Answered By - Cam Parry
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.