Docs: Add more use cases to Tailwind CSS migration guide, resolved #352

website/app/[locale]/guide/migration/tailwindcss/content.mdx

@@ -1,3 +1,4 @@
+## Overview [sr-only]
 **Tailwind CSS** is a utility-first CSS framework that empowers you to select corresponding values for your requirements from a plethora of defined constraints, such as `text-sm`, `pt-4`, `lg:w-9`, and more.
 
 **Master CSS** is a markup-driven CSS language with smart syntax that allows you to construct your user interface using structured and native-like syntax, such as `mcss font:14`, `mcss pt:16`, `mcss w:36@md`, instead of referencing tables or relying on memory.
@@ -6,24 +7,23 @@ Our syntax concepts draw inspiration from [Sass](https://sass-lang.com) and [Typ
 
 ---
 
-## Property differences
+## Declarations
+Master provides various structured property types such as **utilities**, **abbreviations**, **shorthands**, and **symbols**, as well as automatic conversion of property unit values.
 
-Master provides various structured property types such as **utilities**, **abbreviations**, **shorthands**, and **symbols**, as well as automatic conversion of property unit values. For detailed usage, please refer to [Style Declarations](/guide/style-declarations).
+Learn more about [style declarations](/guide/style-declarations).
 
 ### Colon instead of dash
-
 Use a colon `:`, similar to native CSS, to separate property names from values, rather than a dash `-`.
-
 ```html
-- <p class="text-center"></p>
-+ <p class="text:center"></p>
+-<p class="text-center"></p>
++<p class="text:center"></p>
 ```
 
 ### Delimiter instead of underscore
 To avoid conflicts with spaces in `class="a b"`, use the delimiter `|` to separate parameters within property values, instead of an underscore `_`.
 ```html
-- <div class="shadow-[0_1px_2px_-3px_rgba(0,0,0,0.3)]"></div>
-+ <div class="shadow:0|1|2|-3|rgba(0,0,0,.3)"></div>
+-<div class="shadow-[0_1px_2px_-3px_rgba(0,0,0,0.3)]"></div>
++<div class="shadow:0|1|2|-3|rgba(0,0,0,.3)"></div>
 ```
 You can observe that the reduced contrast of the delimiter `|`, as highlighted in Master's [syntax highlighting](/guide/language-service) above, is intentional to provide a smoother visual appearance that closely resembles native CSS's whitespace separator ` `:
 ```css
@@ -36,57 +36,87 @@ In Tailwind, identical values for different properties may have different constr
 
 Master automatically converts units according to the characteristics of different properties and input values, making styles more predictable.
 ```html
-- <div class="p-4">`4` means `1rem` in Tailwind</div>
-+ <div class="p:16">16px to 1rem</div>
-+ <div class="p:1rem">equal</div>
-+ <div class="p:4x">equal</div>
+-<div class="p-4">`4` means `1rem` in Tailwind</div>
++<div class="p:4x"></div>
+<div class="p:16">alternative</div>
+<div class="p:1rem">alternative</div>
 ```
 Whether to use `1/2` to represent `50%` depends on your preference, for example, when setting `height:`.
 ```html
-- <div class="h-1/2"></div>
-+ <div class="h:1/2"></div>
-+ <div class="h:50%">equal</div>
+-<div class="h-1/2"></div>
++<div class="h:1/2"></div>
+<div class="h:50%">alternative</div>
 ```
 Let's consider another example with `border-radius`.
 ```html
-- <div class="rounded-md">`md` means `0.375rem` in Tailwind</div>
-+ <div class="r:6"></div>
-+ <div class="r:.375rem">equal</div>
+-<div class="rounded-md">`md` means `0.375rem` in Tailwind</div>
++<div class="r:6"></div>
+<div class="r:.375rem">alternative</div>
 ```
-
 If you don't prefer the abbreviated notation like `p:`, `r:`, you can use the full names, such as `padding:`, `border-radius:`.
 
 ### Decimal or percentage
-
 Equivalent to native `opacity: 0.2;`.
-
 ```html
-- <div class="opacity-20">`20` means `0.2` in Tailwind</div>
-+ <div class="opacity:.2"></div>
-+ <div class="opacity:0.2">equal</div>
+-<div class="opacity-20">`20` means `0.2` in Tailwind</div>
++<div class="opacity:.2"></div>
+<div class="opacity:0.2">alternative</div>
 ```
-
 You can use decimals or percentages to adjust the opacity of colors.
-
 ```html
-- <div class="bg-sky-500/75"></div>
-+ <div class="bg:sky-50/.75"></div>
-+ <div class="bg:sky-50/75%">equal</div>
+-<div class="bg-sky-500/75"></div>
++<div class="bg:sky-50/.75"></div>
+<div class="bg:sky-50/75%">alternative</div>
 ```
 
 ---
 
-## 🚧 Selector differences
+## Selectors
+### Suffixed with `:hover`
+Add pseudo-classes after the main body.
+```html
+- <div class="hover:bg-sky-700"></div>
+<div class="bg:sky-70:hover"></div>
+```
+
+### Suffixed with `::placeholder`
+Add pseudo-elements after the main body.
+```html
+- <div class="placeholder:italic"></div>
+<div class="italic::placeholder"></div>
+```
+
+### Suffixed with `[data-attribute]`
+Add data attributes after the main body.
+```html
+- <div data-size="large" class="data-[size=large]:text-lg"></div>
+<div data-size="large" class="text:18[data-size=large]"></div>
+```
 
 ---
 
-## 🚧 Styles instead of @apply
+## At-rules
+### Suffixed with `@md`
+Add responsive breakpoints after the main body.
+```html
+- <div class="md:text-left"></div>
+<div class="text:left@md"></div>
+```
+You can even use operators like `html @sm&<md`, see the [Responsive Design](/guide/responsive-design) guide.
+
+### Suffixed with `@landscape`
+Add media queries after the main body.
+```html
+- <div class="landscape:hidden"></div>
+<div class="hidden@landscape"></div>
+```
+Not just media queries but feature queries and [more](/reference/at).
 
 ---
 
-## 🚧 Configuration
-### Customizing screens
-Define responsive breakpoints using [queries](/reference/at).
+## Configuration
+### Add screens
+Define responsive breakpoints using variable [screens](/reference/screens).
 ```js name=master.css.js
 -/** @type {import('tailwindcss').Config} */
 -module.exports = {
@@ -100,16 +130,18 @@ Define responsive breakpoints using [queries](/reference/at).
 -        }
 -    }
 -}
-+/** @type {import('@master/css').Config} */
-+export default {
-+    at: {
-+        'sm': 640,
-+        'md': 768,
-+        'lg': 1024,
-+        'xl': 1280,
-+        '2xl': 1536
-+    }
-+}
+/** @type {import('@master/css').Config} */
+export default {
+    variables: {
+        screen: {
+           'sm': 640,
+           'md': 768,
+           'lg': 1024,
+           'xl': 1280,
+           '2xl': 1536
+        }
+    }
+}
 ```
 (x) No longer need redundant screen options.
 ```js name=tailwind.config.js
@@ -130,7 +162,7 @@ Define responsive breakpoints using [queries](/reference/at).
 <div class="hidden**@sm&<md**">
 ```
 
-### Customizing media queries
+### Add media queries
 Using [at](/reference/at) to define media queries, feature queries, and even container queries.
 ```js name=master.css.js
 -/** @type {import('tailwindcss').Config} */
@@ -143,14 +175,47 @@ Using [at](/reference/at) to define media queries, feature queries, and even con
 -        }
 -    }
 -}
-+/** @type {import('@master/css').Config} */
-+export default {
-+    at: {
-+        tall: 'media (min-height: 800px)'
-+    }
-+}
+/** @type {import('@master/css').Config} */
+export default {
+    at: {
+        tall: 'media (min-height: 800px)'
+    }
+}
 ```
 
 ---
 
-## 🚧 More powerful features
+## Strategies
+### Alternative to `@apply`
+Use [styles](/reference/styles) to abstract styles instead of `@apply`.
+```css name=main.css
+- @tailwind base;
+- @tailwind components;
+- @tailwind utilities;
+
+- .btn {
+-      @apply py-2 px-5 bg-white hover:bg-black;
+- }
+```
+```js name=master.css.js
+/** @type {import('@master/css').Config} */
+export default {
+    styles: {
+        btn: 'p:2x|5x bg:white bg:black:hover'
+    }
+}
+```
+```html
+<button class="btn">Submit</button>
+```
+
+### Gap instead of space
+To add space between boxes use [`gap:`](/reference/gap) instead of `space-`.
+```html
+-<div class="flex space-x-4 space-y-4">
++<div class="flex gap:4x">
+    <div>01</div>
+    <div>02</div>
+</div>
+```
+Tailwind uses the `> * + *` universal selection to implement box spacing, which has some performance overhead. It's better to add `flex` or `grid` to the parent container and use the native `gap` property.