Laravel | Notion

Creación de una app, estar en la carpeta de Laravel con POWERSHELL y ambiente Linux WSL y correr:

curl -s <https://laravel.build/nombre-app> | bash

Comando para ejecutar como ambiente linux: WSL
Comando completo sail para PowerShell: vendor/bin/sail
- Configurar alias como sail

TailwindCSS

Instalación de TailwindCSS, ejecutar en el proyecto por powershell:

sail npm install -D tailwindcss postcss autoprefixer

Una vez instalado Tailwind, iniciarlo:

sail npx tailwindcss init

Agregar el require a la compilación en el archivo de vite.config.js (hasta abajo) y pegar lo siguiente

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

Arrancar un entorno de desarrollo con

sail npm run dev

Agregar las directivas a resources/css/app.css (no en public):

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

Agregar la hoja de estilos al <head> de los HTML’s de los xxxx.blade.php (normalmente el header global)

@vite('resources/css/app.css')

Agregar todos los archivos a los que se les aplicaría Tailwind en el file de tailwind.config.js (el * es un atajo de laravel para aplicar a todos los archivos) - esto puede que ya no aplique por vite

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

Configurar paleta de colores en tailwind.config.js: