sábado 28 septiembre 2024

Cómo instalar Tailwind CSS en un proyecto Laravel

Para instalar Tailwind CSS en un proyecto Laravel, sigue estos pasos:

Instalar Tailwind CSS y sus dependencias:

Ejecuta el siguiente comando desde la raíz de tu proyecto para instalar Tailwind CSS, PostCSS y Autoprefixer:

npm install -D tailwindcss postcss autoprefixer

Crear el archivo de configuración de Tailwind:

Genera el archivo de configuración tailwind.config.js con el siguiente comando:

npx tailwindcss init -p

Este comando crea un archivo predeterminado que se puede personalizar según las necesidades del proyecto.

Configuración del fichero `tailwind.config.js`

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Configurar Tailwind en el archivo CSS:

Edita resources/css/app.css e importa las directivas de Tailwind CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Compilar los archivos:

Compila el proyecto utilizando Laravel Mix. Esto generará el CSS de Tailwind optimizado en la carpeta public de Laravel:

npm run dev

Importar hoja de estilo

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @vite('resources/css/app.css')
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Para obtener más detalles, consulta la documentación oficial de Tailwind CSS.

Etiquetas:

php laravel tailwind

Creado por:

Jorge García

Fullstack developer