Home >Web Front-end >CSS Tutorial >Why add Tailwind CSS Atomic Classes to project ❓
Problem
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> <p>output :- </p> <p><img src="https://img.php.cn/upload/article/000/000/000/173397481225444.jpg" alt="Why add Tailwind CSS Atomic Classes to project ❓"></p> <p>Pros :- </p>
Cons :-
Building complex components from a constrained set of primitive utilities.
<template> <div > <p>Output</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173397481369954.jpg" alt="Why add Tailwind CSS Atomic Classes to project ❓"></p> <p>What Happened, where are the classes ⁉️</p>
class="box-border absolute flex justify-items-center top-1-2 left-1-2 fill-gray-alpha color-fill max-w-sm"
.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 */ }
Pros
Cons
:deep() / ::v-deep
div { ::v-deep .center-div { background-color: red; } }
div { ::v-deep :first-of-type { background-color: red; } }
Tailwind Installation
npm install -D tailwindcss npx tailwindcss init
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 styles
cherry 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
The above is the detailed content of Why add Tailwind CSS Atomic Classes to project ❓. For more information, please follow other related articles on the PHP Chinese website!