Laravel Uygulamalarında TailwindCSS Kurulumu ve Kullanımı

Bu içerikte Laravel uygulamarınıza nasıl TailwindCSS kurulacağını ve gerekli düzenlemeleri nasıl yapacağınıza değineceğiz. Öncelikle Laravel kurulumunu yapalım.

laravel new larawind

Projenizin ana dizinindeki, TailwindCSS için gerekli paketlerin yer aldığı package.json dosyasını aşağıdaki gibi düzenleyelim.

{
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^10.1.0",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.2.1",
        "postcss-import": "^12.0.1",
        "tailwindcss": "^2.0.2"
    }
}

Daha sonra npm install komutunu çalıştırın ve webpack.mix.js dosyasını aşağıdaki gibi düzenleyin;

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

Şimdi de resources/css/app.css dosyasını aşağıdaki gibi düzenleyin;

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Uygulamanızdaki değişikleri takip etmek için npm run watch komutunu çalıştırmalısınız.

Artık uygulamanız TailwindCSS kullanmaya hazır. Deneme amaçlı welcome.blade.php dosyasını aşağıdaki gibi düzenleyin.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Larawind</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body class="antialiased">
        <div class="relative flex items-center justify-center min-h-screen bg-gray-800">
            <img 
                src="https://wedat.org/wp-content/uploads/2021/05/cropped-wedat.org-logo.png" 
                alt="wedat.org Logo" 
                class="h-32 animate-bounce"
            >
        </div>
    </body>
</html>

Ayrıca just-in-time compiler (JIT Mode) kullanarak daha hızlı ve etkili stil dosyaları oluşturabilirsiniz. Bunun için anadizinde oluşan tailwind.config.js dosyasını aşağıdaki gibi düzenleyin;

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    mode: 'jit',

    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
        extend: {
            opacity: ['disabled'],
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

JIT ile hem hızlı derleme hemde daha küçük boyutlu stil dosyaları oluşturabilirsiniz.

İlk Yorumu Siz Yapın

Bir cevap yazın Cevabı iptal et