What is Tailwind CSS Tailwind CSS is a utility-first CSS framework packed with classes for quickly custom user interfaces without creating our classes.
Pros
- Prevent classes name of parent and child components are duplicate leads to a style collision problem.
- Make styling elements direction in a project the same way.
- Compile size of a CSS file is smaller than traditional styling ( I will write the articles about optimization Tailwind later, I hope files size are smaller following their advertisement 😂).
After talking about Tailwind, Let's start to install Tailwind to our project!.
Installation
- Install Angular CLI with npm or yarn.
// NPM
npm install -g @angular/cli
// Yarn
yarn add @angular/cli
- Create Angular project.
ng new angular-tailwind
cd angular-tailwind
- Add Tailwind CSS into our project.
// NPM
npm install -D tailwindcss postcss autoprefixer
// Yarn
yarn add tailwindcss
// Create file Tailwind config
npx tailwindcss init
- Add some settings in tailwind.config.js ( same level as package.json ) add
"./src/**/*.{html,ts}",in content
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
- Add Tailwind in our main style sheet ( It is different when you select style config when creating Angular project ).
1.1 Select Style as CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
1.2 Select Style as SCSS or else
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
- Start build process
ng serve
- Let's try to apply Tailwind to our HTML code. If you can run the code and its beautiful display on the website congratulations!, you are finished adding Tailwind to the project. But f you are stuck adding Tailwind to our project please let me know in the comment.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="bg-white border-slate-100 dark:bg-slate-800 dark:border-slate-500 border-b rounded-t-xl p-4 pb-6 sm:p-10 sm:pb-8 lg:p-6 xl:p-10 xl:pb-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="../assets/full-stack-radio.png" alt="" width="88" height="88" class="flex-none rounded-lg bg-slate-100" /> | |
| <div class="min-w-0 flex-auto space-y-1 font-semibold"> | |
| <p class="text-cyan-500 dark:text-cyan-400 text-sm leading-6"> | |
| <abbr title="Episode">Ep.</abbr> 128 | |
| </p> | |
| <h2 class="text-slate-500 dark:text-slate-400 text-sm leading-6 truncate"> | |
| Scaling CSS at Heroku with Utility Classes | |
| </h2> | |
| <p class="text-slate-900 dark:text-slate-50 text-lg"> | |
| Full Stack Radio | |
| </p> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="relative"> | |
| <div class="bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden"> | |
| <div class="bg-cyan-500 dark:bg-cyan-400 w-1/2 h-2" role="progressbar" aria-label="music progress" aria-valuenow="1456" aria-valuemin="0" aria-valuemax="4550"></div> | |
| </div> | |
| <div class="ring-cyan-500 dark:ring-cyan-400 ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow"> | |
| <div class="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full ring-1 ring-inset ring-slate-900/5"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm leading-6 font-medium tabular-nums"> | |
| <div class="text-cyan-500 dark:text-slate-100">24:16</div> | |
| <div class="text-slate-500 dark:text-slate-400">75:50</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-50 text-slate-500 dark:bg-slate-600 dark:text-slate-200 rounded-b-xl flex items-center"> | |
| <div class="flex-auto flex items-center justify-evenly"> | |
| <button type="button" aria-label="Add to favorites"> | |
| <svg width="24" height="24"> | |
| <path d="M7 6.931C7 5.865 7.853 5 8.905 5h6.19C16.147 5 17 5.865 17 6.931V19l-5-4-5 4V6.931Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| </button> | |
| <button type="button" class="hidden sm:block lg:hidden xl:block" aria-label="Previous"> | |
| <svg width="24" height="24" fill="none"> | |
| <path d="m10 12 8-6v12l-8-6Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| <path d="M6 6v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| </button> | |
| <button type="button" aria-label="Rewind 10 seconds"> | |
| <svg width="24" height="24" fill="none"> | |
| <path d="M6.492 16.95c2.861 2.733 7.5 2.733 10.362 0 2.861-2.734 2.861-7.166 0-9.9-2.862-2.733-7.501-2.733-10.362 0A7.096 7.096 0 0 0 5.5 8.226" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| <path d="M5 5v3.111c0 .491.398.889.889.889H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <button type="button" class="bg-white text-slate-900 dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-20 h-20 rounded-full ring-1 ring-slate-900/5 shadow-md flex items-center justify-center" aria-label="Pause"> | |
| <svg width="30" height="32" fill="currentColor"> | |
| <rect x="6" y="4" width="4" height="24" rx="2" /> | |
| <rect x="20" y="4" width="4" height="24" rx="2" /> | |
| </svg> | |
| </button> | |
| <div class="flex-auto flex items-center justify-evenly"> | |
| <button type="button" aria-label="Skip 10 seconds"> | |
| <svg width="24" height="24" fill="none"> | |
| <path d="M17.509 16.95c-2.862 2.733-7.501 2.733-10.363 0-2.861-2.734-2.861-7.166 0-9.9 2.862-2.733 7.501-2.733 10.363 0 .38.365.711.759.991 1.176" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| <path d="M19 5v3.111c0 .491-.398.889-.889.889H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| </button> | |
| <button type="button" class="hidden sm:block lg:hidden xl:block" aria-label="Next"> | |
| <svg width="24" height="24" fill="none"> | |
| <path d="M14 12 6 6v12l8-6Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| <path d="M18 6v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| </button> | |
| <button type="button" class="rounded-lg text-xs leading-6 font-semibold px-2 ring-2 ring-inset ring-slate-500 text-slate-500 dark:text-slate-100 dark:ring-0 dark:bg-slate-500"> | |
| 1x | |
| </button> | |
| </div> | |
| </div> |
However, Tailwind CSS still has CONS.
CONS
We need to have good communication among the team. Because we change the way to style elements.
The styles are mixed in HTML code makes it hard to understand.
Take time for learning about utility classes of Tailwind such as Color, Spacing, Sizing, Typography, and so on.
Conclusion
Tailwind CSS is an alternative way to styling elements and helps eliminate the styling collision problems also reduces time to create a design system and styling elements.
Bonus
Install extensions for used Tailwind efficiencies.
- InteliJ The JetBrains already supported Tailwind CSS. If you want to read more, I provided this link
- VSCode link
My code.
Repository : Github
If something's wrong, incomplete or you want to share the experience. Please let me know in the comment.
Thank you for taking the time to read this😘.
Top comments (0)