i18n(es): Updated `customization.mdx` & translated `css-and-tailwind.mdx` (#484)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

2 files changed, 293 insertions, 38 deletions

diff --git a/docs/src/content/docs/es/guides/css-and-tailwind.mdx b/docs/src/content/docs/es/guides/css-and-tailwind.mdx
new file mode 100644
index 00000000..d601836f
--- /dev/null
+++ b/docs/src/content/docs/es/guides/css-and-tailwind.mdx
@@ -0,0 +1,291 @@
+---
+title: CSS y Estilos
+description: Aprende a darle estilo a tu sitio Starlight con CSS personalizado o integrado con Tailwind CSS.
+---
+
+Puedes darle estilo a tu sitio Starlight con archivos CSS personalizados o usar el plugin Starlight Tailwind.
+
+## Estilos CSS personalizados
+
+Personaliza los estilos aplicados a tu sitio Starlight proporcionando archivos CSS adicionales para modificar o extender los estilos predeterminados de Starlight.
+
+1. Agrega un archivo CSS a tu directorio `src/`.
+   Por ejemplo, podrías establecer un ancho de columna predeterminado más ancho y un tamaño de texto más grande para los títulos de las páginas:
+
+   ```css
+   /* src/styles/custom.css */
+   :root {
+   	--sl-content-width: 50rem;
+   	--sl-text-5xl: 3.5rem;
+   }
+   ```
+
+2. Agrega la ruta de tu archivo CSS a la matriz `customCss` de Starlight en `astro.config.mjs`:
+
+   ```js
+   // astro.config.mjs
+   import { defineConfig } from 'astro/config';
+   import starlight from '@astrojs/starlight';
+
+   export default defineConfig({
+   	integrations: [
+   		starlight({
+   			title: 'Docs With Custom CSS',
+   			customCss: [
+   				// Ruta relativa a tu archivo CSS personalizado
+   				'./src/styles/custom.css',
+   			],
+   		}),
+   	],
+   });
+   ```
+
+Puede ver todas las propiedades CSS personalizadas utilizadas por Starlight que puede establecer para personalizar su sitio en el archivo [`props.css` en GitHub](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css).
+
+## Tailwind CSS
+
+El soporte de CSS de Tailwind en proyectos de Astro es proporcionado por la [integración Astro Tailwind](https://docs.astro.build/en/guides/integrations-guide/tailwind/).
+Starlight proporciona un complemento de Tailwind para ayudar a configurar Tailwind para que sea compatible con los estilos de Starlight.
+
+El plugin Starlight Tailwind aplica la siguiente configuración:
+
+- Configura las variantes de Tailwind `dark:` para que funcionen con el modo oscuro de Starlight.
+- Usa los [colores y fuentes del tema](#estilando-starlight-con-tailwind) de Tailwind en la UI de Starlight.
+- Desactiva la [comprobación preliminar “Preflight”](https://tailwindcss.com/docs/preflight) de Tailwind mientras restaura selectivamente las partes esenciales de la comprobación preliminar requeridas para las clases de utilidad de borde de Tailwind.
+
+### Crea un nuevo proyecto con Tailwind
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+Empieza un nuevo proyecto Starlight con Tailwind CSS preconfigurado usando `create astro`:
+
+<Tabs>
+<TabItem label="npm">
+
+```sh
+npm create astro@latest -- --template starlight/tailwind
+```
+
+</TabItem>
+<TabItem label="pnpm">
+
+```sh
+pnpm create astro --template starlight/tailwind
+```
+
+</TabItem>
+<TabItem label="Yarn">
+
+```sh
+yarn create astro --template starlight/tailwind
+```
+
+</TabItem>
+</Tabs>
+
+### Agrega Tailwind a un proyecto existente
+
+Si ya tienes un sitio Starlight y quieres agregar Tailwind CSS, sigue estos pasos.
+
+1.  Agrega la integración de Tailwind de Astro:
+
+    <Tabs>
+
+    <TabItem label="npm">
+
+    ```sh
+    npx astro add tailwind
+    ```
+
+    </TabItem>
+
+    <TabItem label="pnpm">
+
+    ```sh
+    pnpm astro add tailwind
+    ```
+
+    </TabItem>
+
+    <TabItem label="Yarn">
+
+    ```sh
+    yarn astro add tailwind
+    ```
+
+    </TabItem>
+
+    </Tabs>
+
+2.  Instala el complemento Starlight Tailwind:
+
+    <Tabs>
+
+    <TabItem label="npm">
+
+    ```sh
+    npm install @astrojs/starlight-tailwind
+    ```
+
+    </TabItem>
+
+    <TabItem label="pnpm">
+
+    ```sh
+    pnpm install @astrojs/starlight-tailwind
+    ```
+
+    </TabItem>
+
+    <TabItem label="Yarn">
+
+    ```sh
+    yarn add @astrojs/starlight-tailwind
+    ```
+
+    </TabItem>
+
+    </Tabs>
+
+3.  Crea un archivo CSS para los estilos base de Tailwind, por ejemplo en `src/tailwind.css`:
+
+    ```css
+    /* src/tailwind.css */
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+    ```
+
+4.  Actualiza tu archivo de configuración de Astro para usar tus estilos base de Tailwind y desactivar los estilos base predeterminados:
+
+    ```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: 'Documentación con Tailwind',
+    			customCss: [
+    				// Ruta a tus estilos base de Tailwind:
+    				'./src/tailwind.css',
+    			],
+    		}),
+    		tailwind({
+    			// Desactiva los estilos base predeterminados:
+    			applyBaseStyles: false,
+    		}),
+    	],
+    });
+    ```
+
+5.  Agrega el complemento Starlight Tailwind a `tailwind.config.cjs`:
+
+    ```js ins={2,7}
+    // tailwind.config.cjs
+    const starlightPlugin = require('@astrojs/starlight-tailwind');
+
+    /** @type {import('tailwindcss').Config} */
+    module.exports = {
+    	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+    	plugins: [starlightPlugin()],
+    };
+    ```
+
+### Estilando Starlight con Tailwind
+
+Starlight utilizará los valores de su [configuración de tema Tailwind](https://tailwindcss.com/docs/theme) en su UI.
+
+Si se establece, las siguientes opciones anularán los estilos predeterminados de Starlight:
+
+- `colors.accent` - usada para enlaces y resaltado de elementos actuales
+- `colors.gray` - usada para colores de fondo y bordes
+- `fontFamily.sans` - usada para el texto de la UI y el contenido
+- `fontFamily.mono` - usada para ejemplos de código
+
+```js {12,14,18,20}
+// tailwind.config.cjs
+const starlightPlugin = require('@astrojs/starlight-tailwind');
+const colors = require('tailwindcss/colors');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {
+			colors: {
+				// Tu color de acento preferido. Indigo es el más cercano a los valores predeterminados de Starlight.
+				accent: colors.indigo,
+				// Tu escala de grises preferida. Zinc es el más cercano a los valores predeterminados de Starlight.
+				gray: colors.zinc,
+			},
+			fontFamily: {
+				// Tu fuente de texto preferida. Starlight usa una pila de fuentes del sistema de forma predeterminada.
+				sans: ['"Atkinson Hyperlegible"'],
+				// Tu fuente de código preferida. Starlight usa fuentes monoespaciadas del sistema de forma predeterminada.
+				mono: ['"IBM Plex Mono"'],
+			},
+		},
+	},
+	plugins: [starlightPlugin()],
+};
+```
+
+## Temas
+
+El tema de color de Starlight se puede controlar anulando sus propiedades personalizadas predeterminadas.
+Estas variables son utilizadas en toda la UI con una gama de tonos grises utilizados para los colores de texto y fondo y un color de acento utilizado para los enlaces y para resaltar los elementos actuales en la navegación.
+
+### Editor de temas de color
+
+Usa los controles deslizantes a continuación para modificar las paletas de colores de acento y gris de Starlight.
+Las áreas de vista previa oscura y clara mostrarán los colores resultantes, y toda la página también se actualizará para obtener una vista previa de sus cambios.
+
+Cuando estés satisfecho con tus cambios, copia el código CSS o Tailwind a continuación y úsalo en tu proyecto.
+
+import ThemeDesigner from '../../../../components/theme-designer.astro';
+
+<ThemeDesigner
+	labels={{
+		presets: {
+			label: 'Preajustes',
+			ocean: 'Océano',
+			forest: 'Bosque',
+			oxide: 'Óxido',
+			nebula: 'Nebulosa',
+			default: 'Por defecto',
+			random: 'Aleatorio',
+		},
+		editor: {
+			accentColor: 'Acento',
+			grayColor: 'Gris',
+			hue: 'Tono',
+			chroma: 'Croma',
+			pickColor: 'Elegir color',
+		},
+		preview: {
+			darkMode: 'Modo oscuro',
+			lightMode: 'Modo claro',
+			bodyText:
+				'El texto del cuerpo se muestra en un tono gris con un alto contraste con el fondo.',
+			linkText: 'Los enlaces están coloreados.',
+			dimText:
+				'Algunos textos, como la tabla de contenidos, tienen un contraste más bajo.',
+			inlineCode: 'El código en línea tiene un fondo distinto.',
+		},
+	}}
+>
+	<Fragment slot="css-docs">
+		Agrega el siguiente CSS a tu proyecto en un [archivo CSS
+		personalizado](#estilos-css-personalizados) para aplicar este tema a tu
+		sitio.
+	</Fragment>
+	<Fragment slot="tailwind-docs">
+		El ejemplo de [archivo de configuración de
+		Tailwind](#estilando-starlight-con-tailwind) a continuación incluye paletas
+		de colores `accent` y `gray` generadas para usar en el objeto de
+		configuración `theme.extend.colors`.
+	</Fragment>
+</ThemeDesigner>
diff --git a/docs/src/content/docs/es/guides/customization.mdx b/docs/src/content/docs/es/guides/customization.mdx
index 6997fa4e..9fe5fea2 100644
--- a/docs/src/content/docs/es/guides/customization.mdx
+++ b/docs/src/content/docs/es/guides/customization.mdx
@@ -256,42 +256,6 @@ hero:
 ---
 ```
 
-## Estilos CSS personalizados
-
-Personaliza los estilos aplicados a tu sitio de Starlight proporcionando archivos CSS adicionales para modificar o extender los estilos predeterminados de Starlight.
-
-1. Agrega un archivo CSS al directorio `src/`.
-   Por ejemplo, podrías anular el tono de acento azul predeterminado de Starlight y establecerlo en púrpura:
-
-   ```css
-   /* src/styles/custom.css */
-   :root {
-   	--sl-hue-accent: 270;
-   }
-   ```
-
-2. Agrega la ruta de tu archivo CSS al array `customCss` de Starlight en el archivo `astro.config.mjs`:
-
-   ```js
-   // astro.config.mjs
-   import { defineConfig } from 'astro/config';
-   import starlight from '@astrojs/starlight';
-
-   export default defineConfig({
-   	integrations: [
-   		starlight({
-   			title: 'Docs Con Un CSS Personalizado',
-   			customCss: [
-   				// Ruta relativa hacia tu archivo CSS personalizado
-   				'./src/styles/custom.css',
-   			],
-   		}),
-   	],
-   });
-   ```
-
-Puedes ver todas las propiedades CSS personalizadas utilizadas por Starlight que puedes configurar para personalizar tu sitio en el archivo [`props.css` en GitHub](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css).
-
 ## Fuentes personalizadas
 
 De forma predeterminada, Starlight utiliza fuentes sans-serif disponibles en el dispositivo local del usuario para todo el texto.
@@ -419,7 +383,7 @@ Proporciona módulos npm que puedes instalar para las fuentes que deseas utiliza
 
 ### Usar fuentes
 
-Para aplicar la fuente que configuraste a tu sitio, utiliza el nombre de la fuente elegida en un archivo CSS personalizado.
+Para aplicar la fuente que configuraste a tu sitio, utiliza el nombre de la fuente elegida en un [archivo CSS personalizado](/es/guides/css-and-tailwind/#custom-css-styles).
 Por ejemplo, para anular la fuente predeterminada de Starlight en todas partes, establece la propiedad personalizada `--sl-font`:
 
 ```css
@@ -441,4 +405,4 @@ main {
 }
 ```
 
-Sigue las [instrucciones de CSS personalizado](#estilos-css-personalizados) para agregar tus estilos a tu sitio.
+Sigue las [instrucciones de CSS personalizado](/guides/css-and-tailwind/#estilos-css-personalizados) para agregar tus estilos a tu sitio.