- Taiwind'i projeye dahil etmek için Terminal'den
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
komutunu çalıştır.
- Yüklemeleri tamamladıktan sonra Terminal'den
npx tailwindcss init komutu ile Tailwind config dosyasını oluştur.
- JIT modunu açmak için config dosyasına
module.export = {
+ mode:'jit',
satırını ekle.
- JIT modu açıkken PURGE uygulanacak dosya scope'unu belirtmen çok önemli. O nedenle bunu da belirt.
module.exports = {
mode: 'jit',
- purge: [],
+ purge: [
+ './resources/**/*.blade.php',
+ './resources/**/*.js',
+ './resources/**/*.vue',
+ ],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
- webpack.mix.js dosyasında postCss içerisine Tailwind'i ekle
// webpack.mix.js
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
+ require("tailwindcss"),
]);
.resources/css/app.css içerisinde @tailwind direktifi ile base, components ve utilities stillerini ekle.
@tailwind base;
@tailwind components;
@tailwind utilities;
- views/layout klasöründe ana bir şablon olarak app.blade.php dosyasını oluştur.
-
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Planbro</title>
</head>
<body class="antialiased">
<div class="relative flex items-top justify-center bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
@if (Route::has('login'))
<div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
@auth
<a href="{{ route('home') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Planbro</a>
@else
<a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a>
@if (Route::has('register'))
<a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</a>
@endif
@endauth
</div>
@endif
</div>
@yield('content')
</body>
</html>
- Sonra bu layout dosyasını kullanarak ilk sayfayı oluştur index.blade.php
@extends('layouts.app')
@section('content')
<h1>Planbro</h1>
@endsection
- Ana layout sayfasına stil dosyasını ekle.
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
- routes/web.php içerisinde Ana sayfa için düzenleme yap.
use App\Http\Controllers\MainController;
...
Route::get('/', [MainController::class, 'index'])->name('home');
- MainController'ı yap
php artisan make:controller MainController diyerek
class MainController extends Controller
{
public function index()
{
return view('index');
}
}
- Webpack Watcher ile çalıştır
npx mix watch