You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: public/posts/demystifying-tailwind-css.txt
+51Lines changed: 51 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -86,6 +86,57 @@ Tailwind also makes responsive design easy with prefixes like `sm:`, `md:`, `lg:
86
86
87
87
During development and when building for production, a tool like **Craco** (which sits on top of Create React App's Webpack configuration) processes your code. It uses **PostCSS** and the Tailwind plugin to scan all your files for Tailwind utility classes. It then generates a minimal CSS file containing *only* the styles corresponding to the classes you've actually used. This ensures that your final application bundle is as small and performant as possible.
88
88
89
+
90
+
## Part 5: Let's Change the Color of Horizontal Rule
91
+
You can change the color of an `<hr>` (horizontal rule) element in Tailwind CSS using a couple of common methods:
92
+
93
+
### 1. Using `border-color` utilities (Most Common)
94
+
95
+
By default, an `<hr>` element is rendered as a line using its `border-top` or `border-bottom` property. You can directly apply Tailwind's border color utilities to change its color.
96
+
97
+
```html
98
+
<!-- A simple gray HR -->
99
+
<hr class="border-gray-300" />
100
+
101
+
<!-- A red HR -->
102
+
<hr class="border-red-500" />
103
+
104
+
<!-- A thicker, blue HR -->
105
+
<hr class="border-t-4 border-blue-500" />
106
+
107
+
<!-- An HR with a custom color from your config (e.g., primary.400) -->
108
+
<hr class="border-primary-400" />
109
+
```
110
+
111
+
**Explanation:**
112
+
* `border-gray-300`: Sets the border color to a light gray.
113
+
* `border-red-500`: Sets the border color to red.
114
+
* `border-t-4`: Makes the top border 4 pixels thick. You can use `border-t`, `border-b`, `border-l`, `border-r` or just `border` for all sides.
115
+
* `border-blue-500`: Sets the border color to blue.
116
+
* `border-primary-400`: Uses a custom color defined in your `tailwind.config.js` (like the `primary` color you have).
117
+
118
+
### 2. Using `background-color` utilities with a defined height
119
+
120
+
Another way is to treat the `<hr>` as a block element with a specific height and then apply a background color. This gives you more control over its appearance, especially if you want a solid block of color rather than just a border line.
121
+
122
+
```html
123
+
<!-- A red HR with a height of 1px -->
124
+
<hr class="h-px bg-red-500 border-0" />
125
+
126
+
<!-- A thicker, blue HR -->
127
+
<hr class="h-2 bg-blue-500 border-0" />
128
+
129
+
<!-- An HR with a custom color from your config -->
130
+
<hr class="h-1 bg-primary-400 border-0" />
131
+
```
132
+
133
+
**Explanation:**
134
+
* `h-px`: Sets the height to 1 pixel. You can use any height utility (e.g., `h-1`, `h-2`, `h-4`, etc.).
135
+
* `bg-red-500`: Sets the background color to red.
136
+
* `border-0`: It's important to remove the default border of the `<hr>` when using this method, otherwise, you might see both the border and the background color.
137
+
138
+
Choose the method that best suits your design needs. The `border-color` method is generally more semantic for an `<hr>`, but the `background-color` method offers more flexibility for solid bars.
139
+
89
140
## Conclusion
90
141
91
142
Tailwind CSS provides a powerful and efficient way to build and maintain the UI of the `fezcodex` project. By embracing its utility-first philosophy and leveraging its extensive configuration options, we can rapidly develop consistent, responsive, and performant user interfaces. It streamlines the styling process, allowing developers to focus more on functionality and less on managing complex CSS stylesheets.
0 commit comments