i18n(it): Update css-and-tailwind.mdx (#1643)

Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
withastro · Mar 21, 2024 · 1c873a1 · 1c873a1
1 parent f294b5d
commit 1c873a1
Showing 1 changed file with 81 additions and 73 deletions.
diff --git a/docs/src/content/docs/it/guides/css-and-tailwind.mdx b/docs/src/content/docs/it/guides/css-and-tailwind.mdx
@@ -3,12 +3,16 @@ title: CSS e stile
 description: Scopri come personalizzare lo stile del tuo sito Starlight con CSS personalizzati o integrarlo con Tailwind CSS.
 ---
 
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+
 Puoi modellare il tuo sito Starlight con file CSS personalizzati o utilizzare il plug-in Starlight Tailwind.
 
 ## Stili CSS personalizzati
 
 Personalizza gli stili applicati al tuo sito Starlight fornendo file CSS aggiuntivi per modificare o estendere gli stili predefiniti di Starlight.
 
+<Steps>
+
 1. Aggiungi un file CSS alla tua directory `src/`.
    Ad esempio, potresti impostare una larghezza predefinita della colonna più ampia e una dimensione del testo più grande per i titoli delle pagine:
 
@@ -40,6 +44,8 @@ Personalizza gli stili applicati al tuo sito Starlight fornendo file CSS aggiunt
    });
    ```
 
+</Steps>
+
 Puoi vedere tutte le proprietà personalizzate CSS utilizzate da Starlight che puoi impostare per personalizzare il tuo sito nel [file `props.css` su GitHub](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css).
 
 ## CSS Tailwind
@@ -55,8 +61,6 @@ Il plugin Starlight Tailwind applica la seguente configurazione:
 
 ### Crea un nuovo progetto con Tailwind
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-
 Avvia un nuovo progetto Starlight con Tailwind CSS preconfigurato utilizzando `create astro`:
 
 <Tabs>
@@ -87,112 +91,116 @@ yarn create astro --template starlight/tailwind
 
 Se hai già un sito Starlight e desideri aggiungere Tailwind CSS, segui questi passaggi.
 
+<Steps>
+
 1. Aggiungi l'integrazione Tailwind di Astro:
 
-   <Tabs>
+    <Tabs>
 
-   <TabItem label="npm">
+    <TabItem label="npm">
 
-   ```sh
-   npx astro add tailwind
-   ```
+    ```sh
+    npx astro add tailwind
+    ```
 
-   </TabItem>
+    </TabItem>
 
-   <TabItem label="pnpm">
+    <TabItem label="pnpm">
 
-   ```sh
-   pnpm astro add tailwind
-   ```
+    ```sh
+    pnpm astro add tailwind
+    ```
 
-   </TabItem>
+    </TabItem>
 
-   <TabItem label="Yarn">
+    <TabItem label="Yarn">
 
-   ```sh
-   yarn astro add tailwind
-   ```
+    ```sh
+    yarn astro add tailwind
+    ```
 
-   </TabItem>
+    </TabItem>
 
-   </Tabs>
+    </Tabs>
 
 2. Installa il plugin Starlight Tailwind:
 
-   <Tabs>
+    <Tabs>
 
-   <TabItem label="npm">
+    <TabItem label="npm">
 
-   ```sh
-   npm install @astrojs/starlight-tailwind
-   ```
+    ```sh
+    npm install @astrojs/starlight-tailwind
+    ```
 
-   </TabItem>
+    </TabItem>
 
-   <TabItem label="pnpm">
+    <TabItem label="pnpm">
 
-   ```sh
-   pnpm add @astrojs/starlight-tailwind
-   ```
+    ```sh
+    pnpm add @astrojs/starlight-tailwind
+    ```
 
-   </TabItem>
+    </TabItem>
 
-   <TabItem label="Yarn">
+    <TabItem label="Yarn">
 
-   ```sh
-   yarn add @astrojs/starlight-tailwind
-   ```
+    ```sh
+    yarn add @astrojs/starlight-tailwind
+    ```
 
-   </TabItem>
+    </TabItem>
 
-   </Tabs>
+    </Tabs>
 
 3. Crea un file CSS per gli stili di base di Tailwind, ad esempio in `src/tailwind.css`:
 
-   ```css
-   /* src/tailwind.css */
-   @tailwind base;
-   @tailwind components;
-   @tailwind utilities;
-   ```
+    ```css
+    /* src/tailwind.css */
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+    ```
 
 4. Aggiorna il file di configurazione Astro per utilizzare gli stili di base Tailwind e disabilitare gli stili di base predefiniti:
 
-   ```js {11-12,16-17}
-   // astro.config.mjs
-   import { defineConfig } from 'astro/config';
-   import starlight from '@astrojs/starlight';
-   import tailwind from '@astrojs/tailwind';
-
-   export default defineConfig({
-   	integrations: [
-   		starlight({
-   			title: 'Docs con Tailwind',
-   			customCss: [
-   				// Percorso per gli stili di base di Tailwind
-   				'./src/tailwind.css',
-   			],
-   		}),
-   		tailwind({
-   			// Disattiva gli stili di base predefiniti
-   			applyBaseStyles: false,
-   		}),
-   	],
-   });
-   ```
+    ```js {11-12,16-17}
+    // astro.config.mjs
+    import { defineConfig } from 'astro/config';
+    import starlight from '@astrojs/starlight';
+    import tailwind from '@astrojs/tailwind';
+
+    export default defineConfig({
+    	integrations: [
+    		starlight({
+    			title: 'Docs con Tailwind',
+    			customCss: [
+    				// Percorso per gli stili di base di Tailwind
+    				'./src/tailwind.css',
+    			],
+    		}),
+    		tailwind({
+    			// Disattiva gli stili di base predefiniti
+    			applyBaseStyles: false,
+    		}),
+    	],
+    });
+    ```
 
 5. Aggiungi il plugin Starlight Tailwind a `tailwind.config.cjs`:
 
-   ```js ins={2,7}
-   // tailwind.config.mjs
-   import starlightPlugin from '@astrojs/starlight-tailwind';
+    ```js ins={2,7}
+    // tailwind.config.mjs
+    import starlightPlugin from '@astrojs/starlight-tailwind';
 
-   /** @type {import('tailwindcss').Config} */
-   export default {
-   	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-   	plugins: [starlightPlugin()],
-   };
-   ```
+    /** @type {import('tailwindcss').Config} */
+    export default {
+    	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+    	plugins: [starlightPlugin()],
+    };
+    ```
+
+</Steps>
 
 ### Styling di Starlight con Tailwind