---
title: "Ce este Tailwind CSS"
description: "Tailwind CSS este un framework utilitar (low level) creat pentru a construi mai rapid interfete web, fara nevoia de a scrie cod CSS custom si fara a iesi din HTML. Mai exact, Tailwind foloseste..."
url: https://blogdeit.ro/ce-este-tailwind-css
date: 2021-04-17
modified: 2023-08-02
author: "Radu Popescu"
image: https://blogdeit.ro/wp-content/uploads/2021/07/vdi-coding.jpg
categories: ["Coding", "RO"]
tags: ["atomic css", "bootstrap", "css", "framework css", "tailwind"]
type: post
lang: en
---

# Ce este Tailwind CSS

**(https://tailwindcss.com/)** este un framework utilitar (low level) creat pentru a construi mai rapid interfete web, fara nevoia de a scrie cod CSS custom si fara a iesi din HTML. Mai exact, Tailwind foloseste arhitectura Atomic CSS care presupune crearea de clase mici si simple al caror scop e sa faca un singur lucru.

### CSS Clasic

```
.card{
font-size: 10px;
color: red;
text-align: center;
}
```

### Atomic CSS

```
.font-10{ font-size: 10px; }
.color-red{ color: red; }
.text-center{ text-align: center; }
```

Folosirea Tailwind CSS seamana cu scrierea codului CSS inline, diferenta fiind faptul ca scrie clase nu proprietati CSS. Acest lucru poate incarca destul de mult layout-ul HTML dar poate face dezvoltarea mai rapid… Asta bineinteles daca ai cunostinte solide de CSS. Desi nu pare complicat, e nevoie de ceva timp ca sa inveti cat mai multe clase utile.

### Exemplu Tailwind CSS

```

Button

```

### Cand sa nu folosesti Tailwind CSS?

- Cand te grabesti si ai un proiect mic sau un Proof-of-Concept (recomand Bootstrap)
- Cand esti incepator in CSS
- Cand nu iti place sa aglomerezi codul HTML
- Cand ai nevoie de performanta din prima

### Alte resurse

(https://tailwindui.com/)
(https://tailwindcomponents.com/)