Skip to content

Commit 3f611a8

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #1071 from SadafKausar2025/tailwindcss
Added More content to Tailwindcss
2 parents c962921 + e43668e commit 3f611a8

11 files changed

+696
-146
lines changed

‎docs/tailwind/_category_.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"label": "Tailwind",
2+
"label": "TailwindCSS",
33
"position": 8,
44
"link": {
55
"type": "generated-index",
6-
"description": "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It is developed and maintained by Microsoft."
6+
"description": "Tailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box."
77
}
88
}

‎docs/tailwind/core_concept/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Core Concept",
3+
"position": 8,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Tailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box."
7+
}
8+
}

‎docs/tailwind/core_concept/utility_first_fundamental.md

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
---
2+
id: utility_first_fundamental
3+
title: utility_first_fundamental
4+
sidebar_label: utility_first_fundamental
5+
sidebar_position: 1
6+
tags:
7+
- Tailwind CSS
8+
- Getting Started
9+
- Tailwind CSS Setup
10+
- Tailwind CSS Installation
11+
- Tailwind CSS Quickstart
12+
description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage.
13+
---
14+
15+
# Utility-First Fundamentals
16+
17+
Building complex components from a constrained set of primitive utilities.
18+
19+
## Overview
20+
21+
Traditionally, whenever you need to style something on the web, you write CSS.
22+
23+
Using a traditional approach where custom designs require custom CSS
24+
25+
```html
26+
<div class="chat-notification">
27+
<div class="chat-notification-logo-wrapper">
28+
<img
29+
class="chat-notification-logo"
30+
src="/img/logo.svg"
31+
alt="ChitChat Logo" />
32+
</div>
33+
<div class="chat-notification-content">
34+
<h4 class="chat-notification-title">ChitChat</h4>
35+
<p class="chat-notification-message">You have a new message!</p>
36+
</div>
37+
</div>
38+
39+
<style>
40+
.chat-notification {
41+
display: flex;
42+
align-items: center;
43+
max-width: 24rem;
44+
margin: 0 auto;
45+
padding: 1.5rem;
46+
border-radius: 0.5rem;
47+
background-color: #fff;
48+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
49+
}
50+
.chat-notification-logo-wrapper {
51+
flex-shrink: 0;
52+
}
53+
.chat-notification-logo {
54+
height: 3rem;
55+
width: 3rem;
56+
}
57+
.chat-notification-content {
58+
margin-left: 1.5rem;
59+
}
60+
.chat-notification-title {
61+
color: #1a202c;
62+
font-size: 1.25rem;
63+
line-height: 1.25;
64+
}
65+
.chat-notification-message {
66+
color: #718096;
67+
font-size: 1rem;
68+
line-height: 1.5;
69+
}
70+
</style>
71+
With Tailwind, you style elements by applying pre-existing classes directly in
72+
your HTML. Using utility classes to build custom designs without writing CSS
73+
ChitChat You have a new message!
74+
75+
<div
76+
class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
77+
<div class="shrink-0">
78+
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
79+
</div>
80+
<div>
81+
<div class="text-xl font-medium text-black">ChitChat</div>
82+
<p class="text-slate-500">You have a new message!</p>
83+
</div>
84+
</div>
85+
```
86+
87+
In the example above, we’ve used:
88+
89+
1. Tailwind’s flexbox and padding utilities (flex, shrink-0, and p-6) to control the overall card layout
90+
2. The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally
91+
3. The background color, border radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-lg) to style the card’s appearance
92+
4. The width and height utilities (w-12 and h-12) to size the logo image
93+
5. The space-between utilities (space-x-4) to handle the spacing between the logo and the text
94+
6. The font size, text color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text
95+
7. This approach allows us to implement a completely custom component design without writing a single line of custom CSS.
96+
97+
Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it.
98+
99+
But once you’ve actually built something this way, you’ll quickly notice some really important benefits:
100+
101+
You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container.
102+
103+
Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.
104+
105+
Making changes feels safer. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.
106+
When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture.
107+
108+
​
109+
110+
### Why not just use inline styles?
111+
112+
A common reaction to this approach is wondering, “isn’t this just inline styles?” and in some ways it is — you’re applying styles directly to elements instead of assigning them a class name and then styling that class.
113+
114+
But using utility classes has a few important advantages over inline styles:
115+
116+
Designing with constraints. Using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs.
117+
Responsive design. You can’t use media queries in inline styles, but you can use Tailwind’s responsive utilities to build fully responsive interfaces easily.
118+
Hover, focus, and other states. Inline styles can’t target states like hover or focus, but Tailwind’s state variants make it easy to style those states with utility classes.
119+
This component is fully responsive and includes a button with hover and focus styles, and is built entirely with utility classes:
120+
121+
```html
122+
<div
123+
class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
124+
<img
125+
class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0"
126+
src="/img/erin-lindford.jpg"
127+
alt="Woman's Face" />
128+
<div class="text-center space-y-2 sm:text-left">
129+
<div class="space-y-0.5">
130+
<p class="text-lg text-black font-semibold">Erin Lindford</p>
131+
<p class="text-slate-500 font-medium">Product Engineer</p>
132+
</div>
133+
<button
134+
class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">
135+
Message
136+
</button>
137+
</div>
138+
</div>
139+
```
140+
141+
​
142+
143+
### Maintainability concerns
144+
145+
The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations.
146+
147+
This is easily solved by extracting components and partials, and using editor and language features like multi-cursor editing and simple loops.
148+
149+
<!-- PrimaryButton.vue -->
150+
151+
```html
152+
<template>
153+
<button
154+
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
155+
<slot />
156+
</button>
157+
</template>
158+
```
159+
160+
Aside from that, maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. Large companies like GitHub, Netflix, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success.
161+
162+
If you’d like to hear about others’ experiences with this approach, check out the following resources:
163+
164+
By The Numbers: A Year and a Half with Atomic CSS by John Polacek
165+
No, Utility Classes Aren’t the Same As Inline Styles by Sarah Dayan of Algolia
166+
Diana Mounter on using utility classes at GitHub, a podcast interview
167+
For even more, check out The Case for Atomic/Utility-First CSS, curated by John Polacek.

‎docs/tailwind/getstart.md

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎docs/tailwind/getting_started/Optimizing_for_production.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
id: optimizing-for-production
3+
title: optimizing-for-production
4+
sidebar_label: optimizing-for-production
5+
sidebar_position: 5
6+
tags:
7+
- Tailwind CSS
8+
- Getting Started
9+
- Tailwind CSS Setup
10+
- Tailwind CSS Installation
11+
- Tailwind CSS Quickstart
12+
description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage.
13+
---
14+
15+
# Optimizing for Production
16+
17+
## Introduction
18+
19+
Tailwind CSS focuses on producing the smallest CSS file possible by generating only the CSS used in your project. This often results in CSS files under 10kB, even for large projects. For instance, Netflix's Top 10 site uses Tailwind and delivers just 6.5kB of CSS.
20+
21+
## Steps to Optimize
22+
23+
### Minify CSS
24+
25+
Minifying your CSS can be done using tools like [cssnano](https://cssnano.co). If using Tailwind CLI, add the `--minify` flag:
26+
27+
```bash
28+
npx tailwindcss -o build.css --minify
29+
```
30+
31+
## PostCSS Plugin
32+
33+
If Tailwind is installed as a PostCSS plugin, add cssnano at the end of your plugin list:
34+
35+
```javascript
36+
// postcss.config.js
37+
module.exports = {
38+
plugins: {
39+
tailwindcss: {},
40+
autoprefixer: {},
41+
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
42+
},
43+
};
44+
```
45+
46+
## Compression
47+
48+
Compress your CSS using Brotli or similar tools.
49+
50+
## Frameworks
51+
52+
Many frameworks handle minification and compression automatically in production.
53+
54+
For more details, visit the Tailwind CSS documentation.

0 commit comments

Comments
 (0)