Laravel 8에서 TailwindCSS v2 사용하기

Hola desarrolladores, vamos a ver cómo configurar de manera manual un entorno de desarrollo con Laravel 8 y TailwindCSS 2.

크레아 운 누에보 프로예토

문서 기록 시구이엔도composer

composer create-project laravel/laravel laravel-tailwind

설치 종속성

설치에 대한 요구 사항이 없는 경우 설치 프로그램이 필요하지 않습니다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

현재 상태에 대한 설명:

"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"
}

구성 문서 생성

Acontinuación, tu archivo 속tailwind.config.js:

npx tailwindcss init

Esto creará un archivo tailwind.config.js minimo en la raíz de su proyecto:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Tailwind를 사용하지 않고 생산할 수 없도록 설정:

// 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: [],
- }
+ })

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: [],
- }
+ })

크리아 아카이브 SCSS

Vamos a la ruta resources/sass y creamos un archivo llamado app.scss :

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

Tailwind와 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 솔로 팔타 코러 엘 코만도:

// Desarrollo
npm run development

// Producción
npm run production

Agregar los estilos a tu application:

<link rel="stylesheet" href="{{ url(mix('css/app.css')) }}">

Y는 TailwindCSS에 대한 프로바입니다.