Laravel Tailwincss h??ng d?n c?i ??t Tailwindcss v?o Laravel

Tailwindcss là 1 css framework có ??c ?i?m n?i b?t là các thu?c tính css ??u ???c gán thành nh?ng class css giúp ng??i dùng d? dàng g?i ra ?? dùng thông qua ??t css class trên html. Bài vi?t này s? h??ng d?n b?n cài ??t Tailwindcss vào Laravel.

?u nh??c ?i?m c?a Tailwindcss

?u ?i?m c?a Tailwindcss:

Các class có tên g?i ??n tính n?ng c?a chúng, nhìn vào class chúng ta có th? ?oán ???c tính n?ng c?a chúng style cho cái gì
Kh? n?ng tùy bi?n linh ho?t và m? r?ng cao
Các class ??t tên ??ng b?, thu?n ti?n cho làm vi?c nhóm
Gi?m thi?u trùng l?p các thu?c tính css trên cùng 1 html element
Ch? nh?ng class ???c g?i trong html m?i ???c build ra nên file css s? nh? và load nhanh h?n.

Nh??c ?i?m:

Có r?t nhi?u class, nên c?n ph?i t??ng ??i thành th?o css thu?n tr??c khi b?t ??u v?i Tailwind
file html ch?a nhi?u class css nên s? dài h?n thông th??ng
Khi design, n?u c?n s?a các ph?n l?p nhau s? t?n th?i gian h?n do ph?i ch?nh s?a r?i copy l?i các class
Có nh?ng giá tr? không nh? ý mu?n nên nhi?u khi s? c?n customize l?i

Cài ??t Tailwindcss vào Laravel

T?o project Laravel:

composer create-project laravel/laravel my-project
cd my-project

Tích h?p Tailwindcss vào project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2 file tailwind.config.js and postcss.config.js s? ???c t?o t?i th? m?c g?c c?a project, m? file tailwind.config.js và s?a thành nh? sau:

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

M? file /resources/css/app.css và thêm vào nh? sau:

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

ch?y l?nh sau ?? auto build css m?i khi có thay ??i trong các lo?i file ?ã khai báo trong tailwind.config.js

npm run dev

N?u có l?i:

'vite' is not recognized as an internal or external command

thì ch?y l?nh:

npm install
npm run dev

N?u g?p l?i:

failed to load config from H:\xampp\htdocs\laratailwind\vite.config.js

thì vào trang ch? nodejs t?i v? b?n m?i nh?t và cài ??t ?? update lên phiên b?n m?i nh?t, sau ?ó ch?y l?i l?nh

npm run dev

N?u l?nh npm run dev ch?y thành công thì ti?p t?c ch?y l?nh run serve laravel:

php artisan serve

B?t ??u s? d?ng Tailwindcss:

trong ph?n <head>

thêm dòng sau:

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

Ví d?:

Ch?nh file m?c ??nh c?a Laravel: resources\views\welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        @vite('resources/css/app.css')
    </head>
    <body>
       <h1 class="text-3xl text-center font-bold bg-blue-200">
            Laravel Tailwind
      </h1>
    </body>
</html>

Tùy ch?nh các giá tr? trong tailwindcss

Tuy các class trong Tailwindcss r?t nhi?u nh?ng v?n có nh?ng giá tr? không có s?n, khi ?ó chúng ta c?n tùy ch?nh ??nh ngh?a l?i ho?c thêm vào các giá tr? m?i.

cách thêm giá tr? m?i:

m? file tailwind.config.js và thêm vào ph?n extend, Ví d?: thêm giá tr? spacing ho?c color:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
      },
      colors: {
        blue: {
          950: '#17275c',
        },
      }
    },
  },
  plugins: [],
}

L?i k?t

Tailwindcss là 1 css framwork khá thú v? và ?áng ?? dùng, và bài vi?t này ?ã gi?i thi?u cách tích h?p Tailwindcss vào Laravel. B?n c?m nh?n gì v? Tailwindcss thì ?? l?i comment nhé.

118