Problem
- When projects with many UI developers, start to code components in their own way, each declaring their own custom css classes, as per need.
Traditional way
When we consider a simple well know issue to center a "div" in a page, this is how we typically create a class, with all the necessary styling.
<template>
<div class="center-div">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint distinctio ratione
corporis maiores beatae quasi veritatis iste consequuntur provident reiciendis
quos molestias, quia ipsam laborum earum voluptatum quo numquam qui?
</div>
</template>
<script>
export default {
name: 'Playground'
};
</script>
<style lang="scss" scoped>
.center-div {
box-sizing: border-box;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 50%;
left: 40%;
max-width: 500px;
background-color: black;
color: white;
}
</style>
output :-
Pros :-
- Developers can add any styling for the classes as they please.
Cons :-
- As project grows, there won't be any uniformed styling for the project.
- It becomes tedious to apply same styles for new modules, as develepoers need to apply them themselves.
- Developer intent is not clear, i.e class name is "center-div" but inner styling can be anything they desire.
Tailwind philosophy
Building complex components from a constrained set of primitive utilities.
- We need to break a component classes from group up with Atomic classes.
<template>
<div
class="box-border absolute flex justify-items-center top-1-2 left-40-p fill-gray-alpha color-fill max-w-sm"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint distinctio ratione
corporis maiores beatae quasi veritatis iste consequuntur provident reiciendis
quos molestias, quia ipsam laborum earum voluptatum quo numquam qui?
</div>
</template>
<script>
export default {
name: 'Playground'
};
</script>
Output
What Happened, where are the classes ⁉️
- As you can see from the code above we have used quite a few classes in our "div"
class="box-border absolute flex justify-items-center top-1-2 left-1-2 fill-gray-alpha color-fill max-w-sm"
- Each class is registered in the global application scope, which goes like this
.box-border {
box-sizing: border-box;
}
.absolute {
position: absolute;
}
.flex {
display: flex;
}
.justify-items-center {
justify-items: center;
}
.top-1-2 {
top: 50%
}
.left-40-p {
left: 40%;
}
.max-w-sm {
max-width: 24rem; /* 384px */
}
- Since all these classes are available in the global scope, any developer can use them freely.
Pros
- Reduces CSS Bundle size significantly.
- Ensures component styling to be consistent across the team.
- Developers can rapidly prototype their ideas, with less effort on redoing the same style.
Cons
- Learning curve, each developer needs to get familiar with classes that already existing.
- Project needs to keep proper documentation, when adding these Global declared classes for others to consume.
Vue JS Pitfalls
:deep() / ::v-deep
- the bain 😓 of Vue JS css targeting.
Traditional Classes
- Targeting and Applying styling for the classes is very easy
div {
::v-deep .center-div {
background-color: red;
}
}
Taiwind Classes
- Developers need to get very creative when targeting "div"
div {
::v-deep :first-of-type {
background-color: red;
}
}
How to Introduce Tailwind CSS Classes into your Application
Traditional way
- we can easily install them with
npm install -D tailwindcss
npx tailwindcss init
- but this will install (i.e register) a plethorah of all the classes, in the global scope.
Unconventional 🤨 way
when your Application already has an existing css library, it would be ideal to cherry pick, the classes we need and add them in one css file and register it globally in the App.
Say your Application only wants flexibility in flexbox styling
-- Get a list of the classes you need from flex stylescherry pick the classes you 🤞 assume 🤞 your application needs, and add them as per need.
with this way we can keep the CSS bundle significanlty small, but the development team needs to have tight control over css they apply 🤟.
/* FlexBox */
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.grow {
flex-grow: 1;
}
.grow-0 {
flex-grow: 0;
}
.shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.justify-normal {
justify-content: normal;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
.justify-stretch {
justify-content: stretch;
}
.justify-items-start {
justify-items: start;
}
.justify-items-end {
justify-items: end;
}
.justify-items-center {
justify-items: center;
}
.justify-items-stretch {
justify-items: stretch;
}
.justify-self-auto {
justify-self: auto;
}
.justify-self-start {
justify-self: start;
}
.justify-self-end {
justify-self: end;
}
.justify-self-center {
justify-self: center;
}
.justify-self-stretch {
justify-self: stretch
}
.content-noraml {
align-content: normal;
}
.content-center {
align-content: center;
}
.content-start {
align-content: start;
}
.content-end {
align-content: end;
}
.content-between {
align-content: space-between;
}
.content-around {
align-content: space-around;
}
.content-evenly {
align-content: space-evenly;
}
.content-baseline {
align-content: baseline;
}
.content-stretch {
align-content: stretch;
}
.items-start {
align-items: start;
}
.items-end {
align-items: end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
// Align Self
.self-auto {
align-self: auto;
}
.self-start {
align-self: flex-start;
}
.self-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-stretch {
align-self: stretch;
}
.self-baseline {
align-self: baseline;
}
Conslusion
- Using Atomic classes with Tailwind as reference can
- Reduce a Project's CSS footprint.
- Maintain Styling consistensy across the Application.
- Increases Developer speed, with rapid prototyping. 🔥
Top comments (0)