Hola desarrolladores, vamos a ver cómo configurar de manera manual un entorno de desarrollo con Laravel 8 y TailwindCSS 2.
Crear un nuevo proyecto
Siguiendo la documentación de laravel crearemos un nuevo proyecto con composer
composer create-project laravel/laravel laravel-tailwind
Instalar dependencias
Luego de crear nuestro proyecto seguiremos a instalar nuestras dependencias para el desarrollo a través de npm
:
npm i -D tailwindcss autoprefixer postcss sass sass-loader
o si está usando yarn
cómo administrador de paquetes:
yarn add -D tailwindcss autoprefixer postcss sass sass-loader
Al momento de escribir este artículo las versiones instaladas en las dependencias son las siguientes:
"devDependencies": {
"autoprefixer": "^10.2.1",
"laravel-mix": "^6.0.6",
"postcss": "^8.2.4",
"sass": "^1.32.2",
"sass-loader": "^8.0.2",
"tailwindcss": "^2.0.2"
}
Crea tu archivo de configuración
A continuación, genera tu archivo tailwind.config.js
:
npx tailwindcss init
Esto creará un archivo tailwind.config.js
mínimo en la raíz de su proyecto:
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Configuremos Tailwind para eliminar los estilos no utilizados en producción:
// tailwind.config.js
- module.exports = {
+ module.exports = (isProd) => ({
- purge: [],
+ purge: {
+ enabled: isProd,
+ content: [
+ "./app/**/*.php",
+ "./resources/**/*.html",
+ "./resources/**/*.php",
+ ],
+ },
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
- }
+ })
Configuración para AlpineJs
// tailwind.config.js
- module.exports = {
+ module.exports = (isProd) => ({
- purge: [],
+ purge: {
+ enabled: isProd,
+ content: [
+ "./app/**/*.php",
+ "./resources/**/*.html",
+ "./resources/**/*.php",
+ ],
+ options: {
+ defaultExtractor: (content) =>
+ content.match(/[\w-/.:]+(?<!:)/g) || [],
+ whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
+ },
+ },
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
- }
+ })
Crear archivo SCSS
Vamos a la ruta resources/sass
y creamos un archivo llamado app.scss
:
@tailwind base;
@tailwind components;
@tailwind utilities;
Configurar Tailwind con Laravel Mix
En su webpack.mix.js
, agregue tailwindcss
:
const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");
const isProd = mix.inProduction();
const tailwindConfig = require("./tailwind.config")(isProd);
mix.js("resources/js/app.js", "public/js/app.js")
.sass("resources/sass/app.scss", "public/css/app.css")
.options({
processCssUrls: false,
postCss: [tailwindcss(tailwindConfig)],
})
.sourceMaps();
if (isProd) {
mix.version();
}
Ahora solo falta correr el comando:
// Desarrollo
npm run development
// Producción
npm run production
Agregar los estilos a tu aplicación:
<link rel="stylesheet" href="{{ url(mix('css/app.css')) }}">
Y comenzar a probar con TailwindCSS.
Top comments (0)