docs(getting-started): use ::steps and mention css files

docs/content/1.getting-started/3.theme.md

@@ -11,8 +11,7 @@ Nuxt UI v3 uses Tailwind CSS v4 alpha which doesn't have a documentation yet, le
 
 Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a `@theme` directive:
 
-```vue [app.vue]
-<style>
+```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -33,7 +32,6 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
   --color-green-900: #0A5331;
   --color-green-950: #052E16;
 }
-</style>
 ```
 
 The `@theme` directive tells Tailwind to make new utilities and variants available based on these variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file.
@@ -48,13 +46,11 @@ You can use the `@source` directive to add explicit content glob patterns if you
 
 This can be useful when writing Tailwind classes in markdown files with [`@nuxt/content`](https://github.com/nuxt/content):
 
-```vue [app.vue]
-<style>
+```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
 @source "../content/**/*.md";
-</style>
 ```
 
 ::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14078"}
@@ -65,13 +61,11 @@ You can learn more about the `@source` directive in this pull request.
 
 You can use the `@plugin` directive to import Tailwind CSS plugins.
 
-```vue [app.vue]
-<style>
+```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
 @plugin "@tailwindcss/typography";
-</style>
 ```
 
 ::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14264"}
@@ -154,8 +148,7 @@ These color aliases are not automatically defined as Tailwind CSS colors, so cla
 
 However, you can generate these classes using Tailwind's `@theme` directive, allowing you to use custom color utility classes while maintaining dynamic color aliases:
 
-```vue [app.vue]
-<style>
+```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -172,7 +165,6 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
   --color-primary-900: var(--ui-color-primary-900);
   --color-primary-950: var(--ui-color-primary-950);
 }
-</style>
 ```
 ::
 
@@ -217,8 +209,7 @@ You can use these variables in classes like `text-[var(--ui-primary)]`, it will
 ::tip
 You can change which shade is used for each color on light and dark mode:
 
-```vue [app.vue]
-<style>
+```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -229,7 +220,6 @@ You can change which shade is used for each color on light and dark mode:
 .dark {
   --ui-primary: var(--ui-color-primary-200);
 }
-</style>
 ```
 ::
 
@@ -324,8 +314,7 @@ body {
 ::tip
 You can customize these CSS variables to tailor the appearance of your application:
 
-```vue [app.vue]
-<style>
+```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -338,7 +327,6 @@ You can customize these CSS variables to tailor the appearance of your applicati
   --ui-bg: var(--ui-color-neutral-950);
   --ui-border: var(--ui-color-neutral-900);
 }
-</style>
 ```
 ::
 
@@ -359,15 +347,13 @@ Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"
 ::tip
 You can customize the default radius value using the default Tailwind CSS variables or a value of your choice:
 
-```vue [app.vue]
-<style>
+```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
 :root {
   --ui-radius: var(--radius-sm);
 }
-</style>
 ```
 ::