Laravel & TWCSS v4 & Vite v6

Laravel & TWCSS v4 guide for Trezo.

Overview

🚀 Laravel v12 + TailwindCSS v4 + Vite v6 – Modern Full-Stack Starter

Build blazing-fast and maintainable web applications with the power of Laravel 12, the latest utility-first Tailwind CSS v4, and ultra-fast frontend tooling powered by Vite 6.

Laravel v12

Robust PHP framework with elegant syntax, powerful routing, Eloquent ORM, and modern features like lazy loading, native type declarations, and improved performance.

TailwindCSS v4

Latest utility-first CSS framework with powerful design tokens, improved dark mode, fluid typography, and better build performance – no need to write custom CSS.

Vite.js v6

Lightning-fast build tool for frontend assets, offering instant hot module replacement (HMR), ES module support, and deep integration with Laravel via Laravel Vite Plugin.

✅ Key Benefits:

  • Modern development workflow with automatic asset refreshing
  • Seamless integration between Blade templates and Tailwind utility classes
  • Optimized production builds using Vite’s Rollup-based bundling
  • Built-in support for Livewire, Inertia.js, and Vue/React if needed
  • Developer-friendly DX with environment-based configs, aliases, and more

File Structure

trezo-laravel-twcss
├── app
│   ├── Http
│   ├── Models
│   └── Providers
├── bootstrap
├── config
│   ├── app.php
│   ├── auth.php
│   ├── cache.php
│   ├── database.php
│   ├── filesystems.php
│   ├── logging.php
│   ├── mail.php
│   ├── queue.php
│   ├── services.php
│   ├── session.php
│   └── sidebar.php       # Sidebar links array
├── database
├── node_modules
├── public
│   ├── assets            # Public assets (CSS, JS, fonts, images)
│   │   ├── css
│   │   ├── fonts
│   │   └── images
│   ├── js
│   ├── .htaccess
│   ├── favicon.ico
│   ├── index.php         # Entry point for web requests
│   └── robots.txt
├── resources             # Blade views, app CSS/JS, language files
│   ├── css
│   ├── js
│   └── views
├── routes                # Route definitions for web and console
│   ├── console.php
│   └── web.php
├── storage               # Logs, compiled views, file uploads
├── tests                 # PHPUnit test cases
├── vendor                # Composer dependencies
├── .editorconfig         # Editor formatting rules
├── .env                  # Environment configuration file
├── .gitignore
├── artisan               # CLI entry for Laravel commands
├── composer.json         # PHP dependencies and project metadata
├── composer.lock
└── package.json          # JS dependencies (if using Laravel Mix)

Setup Development Environment

Server Requirements

To run the Trezo Laravel project, ensure the following server requirements are met:

  • PHP Version: PHP 8.0 or higher
  • Node.js Version: Node.js v18.x or v20.x (LTS) or higher
  • Web Server: Apache or Nginx
  • Database: MySQL 5.7+ or PostgreSQL
  • Composer: Latest version
  • Operating System: Linux, macOS, or Windows

Required PHP Extensions

Ensure the following PHP extensions are installed and enabled:

php extensions:

BCMath
Ctype
Fileinfo
JSON
Mbstring
OpenSSL
PDO
Tokenizer
XML

Pre-requisites

Composer

Ensure that Composer is installed globally on your machine. You can install it using the following command:

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php composer-setup.php
php -r "unlink('composer-setup.php');"
sudo mv composer.phar /usr/local/bin/composer

Setting Up the Project

Open the project from the ThemeForest downloaded bundle.

  • And open the terminal into the bundle.
cd trezo-laravel

composer install
  • Create the .env File:
    • In the root directory of your Laravel project, create a new file named .env
    • You can copy the content from the .env.example file as a starting point. In most cases, you can run the following command in your terminal:
cp .env.example .env
  • Generate the Application Key:
    • Run the following command to generate a new application key, which is essential for encryption and session management:
php artisan key:generate
  • Configure the Database in .env:
    • If you are using SQLite, update the .env file to use the SQLite connection:
DB_CONNECTION=sqlite
DB_DATABASE=database/database.sqlite
  • Ensure the database.sqlite file exists in the database directory. You can create it by running:
touch database/database.sqlite
  • Run Migrations:
    • After setting up the .env file, run the database migrations to create the necessary tables:
php artisan migrate
  • Clear Cache and Serve the Application:
    • Run the following commands to clear any cached configuration and start the Laravel development server:
php artisan config:clear

php artisan cache:clear

npm install

npm run serve

and go to the http://127.0.0.1:8000

Laravel Documentation

Credits

Note: All images are used for preview purpose only and not included in the final purchase files.

Images

Google Fonts

IconFont

Packages

Additional Notes

If you need more details, please refer to the written instructions.

Feel free to reach out to our support team if you have any questions!