Skip to content

Commit 6db84c2

Browse files
reininkreinink
committed
Make class table scrollable on mobile
1 parent 48e7441 commit 6db84c2

File tree

1 file changed

+115
-22
lines changed

1 file changed

+115
-22
lines changed

‎src/pages/blog/tailwindcss-v3-3/index.mdx

Lines changed: 115 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -160,28 +160,121 @@ We've added new logical property utilities for [inset](/docs/top-right-bottom-le
160160

161161
Here's a full list of all of the new utilities we've added and what they map to:
162162

163-
| New class | Properties | Physical counterpart (LTR) |
164-
| -------------- | --------------------------------------------------------- | -------------------------- |
165-
| `start-*` | `inset-inline-start` | `left-*` |
166-
| `end-*` | `inset-inline-end` | `right-*` |
167-
| `ms-*` | `margin-inline-start` | `ml-*` |
168-
| `me-*` | `margin-inline-end` | `mr-*` |
169-
| `ps-*` | `padding-inline-start` | `pl-*` |
170-
| `pe-*` | `padding-inline-end` | `pr-*` |
171-
| `rounded-s-*` | `border-start-start-radius`<br/>`border-end-start-radius` | `rounded-l-*` |
172-
| `rounded-e-*` | `border-start-end-radius`<br/>`border-end-end-radius` | `rounded-l-*` |
173-
| `rounded-ss-*` | `border-start-start-radius` | `rounded-tl-*` |
174-
| `rounded-se-*` | `border-start-end-radius` | `rounded-tr-*` |
175-
| `rounded-ee-*` | `border-end-end-radius` | `rounded-br-*` |
176-
| `rounded-es-*` | `border-end-start-radius` | `rounded-bl-*` |
177-
| `border-s-*` | `border-inline-start-width` | `border-l-*` |
178-
| `border-e-*` | `border-inline-end-width` | `border-r-*` |
179-
| `border-s-*` | `border-inline-start-color` | `border-l-*` |
180-
| `border-e-*` | `border-inline-end-color` | `border-r-*` |
181-
| `scroll-ms-*` | `scroll-margin-inline-start` | `scroll-ml-*` |
182-
| `scroll-me-*` | `scroll-margin-inline-end` | `scroll-mr-*` |
183-
| `scroll-ps-*` | `scroll-padding-inline-start` | `scroll-pl-*` |
184-
| `scroll-pe-*` | `scroll-padding-inline-end` | `scroll-pr-*` |
163+
<div class="-mx-4 overflow-x-auto sm:mx-0">
164+
<div class="inline-block min-w-full align-middle whitespace-nowrap">
165+
<table>
166+
<thead>
167+
<tr>
168+
<th class="pl-4 sm:pl-0">New class</th>
169+
<th>Properties</th>
170+
<th class="pr-4 sm:pr-0">Physical counterpart (LTR)</th>
171+
</tr>
172+
</thead>
173+
<tbody>
174+
<tr>
175+
<td class="pl-4 sm:pl-0"><code>start-*</code></td>
176+
<td><code>inset-inline-start</code></td>
177+
<td class="pr-4 sm:pr-0"><code>left-*</code></td>
178+
</tr>
179+
<tr>
180+
<td class="pl-4 sm:pl-0"><code>end-*</code></td>
181+
<td><code>inset-inline-end</code></td>
182+
<td class="pr-4 sm:pr-0"><code>right-*</code></td>
183+
</tr>
184+
<tr>
185+
<td class="pl-4 sm:pl-0"><code>ms-*</code></td>
186+
<td><code>margin-inline-start</code></td>
187+
<td class="pr-4 sm:pr-0"><code>ml-*</code></td>
188+
</tr>
189+
<tr>
190+
<td class="pl-4 sm:pl-0"><code>me-*</code></td>
191+
<td><code>margin-inline-end</code></td>
192+
<td class="pr-4 sm:pr-0"><code>mr-*</code></td>
193+
</tr>
194+
<tr>
195+
<td class="pl-4 sm:pl-0"><code>ps-*</code></td>
196+
<td><code>padding-inline-start</code></td>
197+
<td class="pr-4 sm:pr-0"><code>pl-*</code></td>
198+
</tr>
199+
<tr>
200+
<td class="pl-4 sm:pl-0"><code>pe-*</code></td>
201+
<td><code>padding-inline-end</code></td>
202+
<td class="pr-4 sm:pr-0"><code>pr-*</code></td>
203+
</tr>
204+
<tr>
205+
<td class="pl-4 sm:pl-0"><code>rounded-s-*</code></td>
206+
<td><code>border-start-start-radius</code><br /><code>border-end-start-radius</code></td>
207+
<td class="pr-4 sm:pr-0"><code>rounded-l-*</code></td>
208+
</tr>
209+
<tr>
210+
<td class="pl-4 sm:pl-0"><code>rounded-e-*</code></td>
211+
<td><code>border-start-end-radius</code><br /><code>border-end-end-radius</code></td>
212+
<td class="pr-4 sm:pr-0"><code>rounded-l-*</code></td>
213+
</tr>
214+
<tr>
215+
<td class="pl-4 sm:pl-0"><code>rounded-ss-*</code></td>
216+
<td><code>border-start-start-radius</code></td>
217+
<td class="pr-4 sm:pr-0"><code>rounded-tl-*</code></td>
218+
</tr>
219+
<tr>
220+
<td class="pl-4 sm:pl-0"><code>rounded-se-*</code></td>
221+
<td><code>border-start-end-radius</code></td>
222+
<td class="pr-4 sm:pr-0"><code>rounded-tr-*</code></td>
223+
</tr>
224+
<tr>
225+
<td class="pl-4 sm:pl-0"><code>rounded-ee-*</code></td>
226+
<td><code>border-end-end-radius</code></td>
227+
<td class="pr-4 sm:pr-0"><code>rounded-br-*</code></td>
228+
</tr>
229+
<tr>
230+
<td class="pl-4 sm:pl-0"><code>rounded-es-*</code></td>
231+
<td><code>border-end-start-radius</code></td>
232+
<td class="pr-4 sm:pr-0"><code>rounded-bl-*</code></td>
233+
</tr>
234+
<tr>
235+
<td class="pl-4 sm:pl-0"><code>border-s-*</code></td>
236+
<td><code>border-inline-start-width</code></td>
237+
<td class="pr-4 sm:pr-0"><code>border-l-*</code></td>
238+
</tr>
239+
<tr>
240+
<td class="pl-4 sm:pl-0"><code>border-e-*</code></td>
241+
<td><code>border-inline-end-width</code></td>
242+
<td class="pr-4 sm:pr-0"><code>border-r-*</code></td>
243+
</tr>
244+
<tr>
245+
<td class="pl-4 sm:pl-0"><code>border-s-*</code></td>
246+
<td><code>border-inline-start-color</code></td>
247+
<td class="pr-4 sm:pr-0"><code>border-l-*</code></td>
248+
</tr>
249+
<tr>
250+
<td class="pl-4 sm:pl-0"><code>border-e-*</code></td>
251+
<td><code>border-inline-end-color</code></td>
252+
<td class="pr-4 sm:pr-0"><code>border-r-*</code></td>
253+
</tr>
254+
<tr>
255+
<td class="pl-4 sm:pl-0"><code>scroll-ms-*</code></td>
256+
<td><code>scroll-margin-inline-start</code></td>
257+
<td class="pr-4 sm:pr-0"><code>scroll-ml-*</code></td>
258+
</tr>
259+
<tr>
260+
<td class="pl-4 sm:pl-0"><code>scroll-me-*</code></td>
261+
<td><code>scroll-margin-inline-end</code></td>
262+
<td class="pr-4 sm:pr-0"><code>scroll-mr-*</code></td>
263+
</tr>
264+
<tr>
265+
<td class="pl-4 sm:pl-0"><code>scroll-ps-*</code></td>
266+
<td><code>scroll-padding-inline-start</code></td>
267+
<td class="pr-4 sm:pr-0"><code>scroll-pl-*</code></td>
268+
</tr>
269+
<tr>
270+
<td class="pl-4 sm:pl-0"><code>scroll-pe-*</code></td>
271+
<td><code>scroll-padding-inline-end</code></td>
272+
<td class="pr-4 sm:pr-0"><code>scroll-pr-*</code></td>
273+
</tr>
274+
</tbody>
275+
</table>
276+
</div>
277+
</div>
185278

186279
These should save you a ton of code if you regularly build sites that need to support both LTR and RTL languages, and you can always combine these with the `ltr` and `rtl` variants when you need more control.
187280

0 commit comments

Comments
 (0)