TomatoPHP
Join CommunityGitHubDiscord
  • 🚀Overview
  • 🏅Support
  • 🤝Contributing
  • 🛣️Screenshots
  • Get Started
    • 🔥Environment Setup
      • 💿Configuring the server
      • 📡Install Valet
      • 🎟️Install PHPMyAdmin
    • 🚀Install
    • ✨Start Your First CRUD
  • Tomato Admin
    • 🚀Get Started
    • 🧠Install
    • 🛗Generate CRUD
    • 👓Slots
    • 🌉Widgets
    • 📖Menus
    • 🔁Requests
      • 🔁Index Request
      • 🔁JSON Request
      • 🔁Get Request
      • 🔁Store Request
      • 🔁Update Request
      • 🔁Destroy Request
    • 🎹Inputs
      • 🔆Rich Text Editor
      • 📞Phone Editor
      • 🖌️Color Switcher
      • 🔁Inputs Repeater
      • 💧Draggable
      • 👨‍💻Code Editor
      • ⚡Select Input
      • 🔚Submit
      • 🧾Items
      • 🔍Search
      • 🚁Icon
    • 🗜️Components
      • 🔗Relation Manager
      • 🧊Container
      • 👁️View Row
      • 🌉Widget
      • 🔘Button
      • 📖Menu
      • 👾Tooltip
      • ©️©️ Clipboard
      • 🛣️Slider
      • ℹ️Action Buttons
      • 🍅Application Logo
      • 🔽Dropdown
      • ⏸️Paginator
    • 📑Table
      • ✅Bulk Actions
      • 🗄️Filters
      • 🦘Slots
    • 🔓Jetstream & Fortify
    • 🆕Upgrade
  • Tomato PHP
    • 🚀Get Started
    • 🎹Use
  • Plugins
    • 🔌Get Started
    • 🏗️Create New Plugin
    • 🔓Tomato Roles
      • 📐Use
      • 🔏Developer Gate
      • 🏗️Register Permission
      • 💽Config
    • 🌎Tomato Locations
      • 🔁APIs
    • ⚙️Tomato Settings
      • 📐Use
      • 💽Config
    • 🔔Tomato Notifications
      • 📐Use
      • 🏗️Notification Service
      • 💽Config
      • 🔁APIs
    • 🔷Tomato Category
      • 📐Use
      • 💽Config
      • 🔁APIs
    • ✨Tomato Forms
      • 📐Use
      • 💽Config
      • 🔁APIs
    • 📖Tomato Menus
      • 📐Use
      • 💽Config
    • 👨‍💼Tomato CRM
      • 📐Use
      • 🏗️Auth Builder
      • 🔥Events
      • 💽Config
      • 🔁APIs
    • 💳Tomato Wallet
      • 📐Use
      • 🗂️Payment Methods
      • 💽Config
      • 🔁APIs
    • 📃Tomato CMS
      • 📐Use
      • 💽Config
    • 🎧Tomato Support
      • 📐Use
      • 💽Config
      • 🔁APIs
    • 👜Tomato Products
      • 💿Config
      • 🌆Screenshots
    • 💯Tomato Coupons
      • 💿Config
      • 🌆Screenshots
    • 🚀Tomato Orders
      • 💿Config
      • 🌆Screenshots
    • 🛍️Tomato Ecommerce
      • 🎭Install E-commerce Theme
      • 💿Config
      • 🌆Screenshots
    • 🚛Tomato Inventory
      • 💿Config
    • 🧾Tomato POS
      • 💿Config
    • 📄Tomato Invoices
      • 💿Config
    • 🏬Tomato Subscription
      • 📐Use
      • 💽Config
    • 🧪Tomato Dusk
      • 📐Use
      • 💿Config
      • 🌆Screenshots
    • ⚔️Tomato Chat
      • 🏗️Setup
      • 📐Use
      • 💽Config
    • 📱Tomato Flutter
      • 📐Use
      • 🧲Generate CRUD
      • 🚀Change Endpoint
      • ⏩Tomato Froms
      • 🛣️Screenshots
    • 🏗️Tomato Builder
      • 🧠Install
      • 🖍️Use
      • 🌆Screenshots
      • 💿Config
    • 🏗️Tomato Sections
      • 💿Config
    • 🎭Tomato Themes
      • 🏂Create New Theme
      • 🏗️Theme Builder
      • 🛍️Install E-commerce Theme
      • 💿Config
    • 📠Tomato Eddy
      • 💿Config
    • 👨‍💻Tomato User Activities
      • 💿Config
    • 👨‍💼Tomato PMS
    • ✅Tomato Tasks
    • ⌛Tomato Timer
    • ✈️Tomato API
    • 🚦Tomato Figma
    • 🌟Tomato SaaS
    • 🔤Tomato Translations
    • 👨‍💻Tomato Artisan
    • 🎒Tomato Backup
    • 📂Tomato Browser
    • 📕Tomato Logs
  • Helpers
    • 🍕Laravel Console Helpers
    • 📽️Laravel Agora
    • 💿Laravel Package Generator
  • Filament
    • 🌎Try Plugins
    • 👨‍🏭Filament Users
      • 🛣️Screenshots
      • 🏗️Installation
      • 🛡️Integration
      • 💼Use Facade Class
      • 📢Publish Assets
    • 🌎Filament Translations
      • 🛣️Screenshots
      • 🏗️Installation
      • 🇪🇬Language Switcher
      • 👨‍💻Command Line
      • 🔧Queue
      • 🔘Buttons
      • 🤖AI Integration
      • 🌠Import & Export
      • 📢Publish Assets
    • ⚙️Filament Settings Hub
      • 🛣️Screenshots
      • 🏗️Installation
      • ▶️Usage
      • 📢Publish Assets
    • 🍔Filament Menus
      • 🏗️Installation
      • 🛣️Screenshots
      • ⏩Use as Filament Navigation
      • ⏯️Use as a Livewire Component
      • 📢Publish Assets
    • 🆎Filament Types
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Register New Type
      • 🎹Use Type Helper
      • 🔄Use Type Column
      • 📢Publish Assets
    • 🔌Filament Plugins
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Usage
      • ®️®️ List your package on the plugins list
      • 📶Use Selected Module in your panel
      • 🏂Get Only Current Panel Plugins
      • 🛑Stop Auto Discover Module Resources
      • 🎸Stop Using Plugins UI
      • 📢Publish Assets
    • 🦄Filament Icons
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Usage
      • 🪄Add Custom Icons
      • 📢Publish Assets
    • 🗺️Filament Locations
      • 🛣️Screenshots
      • 🏗️Installation
      • 📢Publish Assets
    • 📢Filament Alerts
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Usage
      • 🔥Firebase Integration
      • 🔗Slack Integration
      • 🔗Discord Integration
      • ⚙️API
      • 📢Publish Assets
    • 🦸‍♂️Filament Accounts
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Usage
      • 🎇Use Accounts as SaaS Panel
      • 🍫Use Account Column
      • 🔔Use Notifications
      • 🗺️Use Account Locations
      • 🅰️Use Filament Types
      • 🔏Use Filament Impersonate
      • 🏢How to use a builder
      • ✌️Custom validation
      • 🆕Attach New Field
      • 🎌Attach Relation
      • 🔘Attach Table Button
      • 🛁Auth Events
      • ⚙️APIs
    • 💰Filament Wallet
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Usage
      • 🏁Filament Accounts Integration
      • 📢Publish Assets
    • ✨Filament Splade
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Usage
      • 📢Publish Assets
    • 🔐Filament Developer Gate
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Usage
      • 📢Publish Assets
    • 🏛️Filament Helpers
      • 🏗️Installation
      • ⏯️Using
    • 👨‍💻Filament Artisan
      • 🛣️Screenshots
      • 🏗️Installation
      • 🏃‍♂️Running command
      • ⚙️Configuration
      • 📢Publish Assets
    • 📂Filament Browser
      • 🛣️Screenshots
      • 🏗️Installation
      • 📢Publish Assets
    • 🔥Filament FCM
      • 🏗️Installation
      • ⏯️Usage
      • 📢Publish Assets
    • 🖊️Filament CMS
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Custom Type
      • ⏯️Custom Author Type
      • 📺Youtube Integration
      • 🏩Behance Integration
      • 🎭Theme Manager
      • 🏨Page Builder
      • 🔡Form Builder
      • 📢Publish Assets
    • 🔗Filament API
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Usage
      • 📢Publish Assets
    • 👜Filament Ecommerce
      • 🛣️Screenshots
      • 🏗️Installation
      • 🎁Use Coupon Service
      • 📢Publish Assets
    • 🔚Filament Twilio
      • 🏗️Installation
      • ⏯️Using
      • 📢Publish Assets
    • ⚔️Filament Discord
      • 🛣️Screenshot
      • 🏗️Installation
      • ⏯️Using
      • 🦸‍♂️Send to Selected User
      • ⚡Allow Discord Error Logger
      • 📢Publish Assets
    • 🆎Filament Translation Component
      • 🛣️Screenshot
      • 🏗️Installation
      • ⏯️Using
      • 📢Publish Assets
    • 📒Filament Notes
      • 🛣️Screenshot
      • 🏗️Installation
      • ⏯️Using
      • 📢Publish Assets
    • 📼Filament Media Manager
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Use Component
      • 🅰️Add Custom Type
      • 📂Allow Sub Folders
      • 🦸‍♂️Allow User Access
      • 🎇Folders API
      • 📢Publish Assets
    • 💳Filament Withdrawals
      • 🛣️Screenshots
      • 🏗️Installation
      • ⏯️Custom Author Type
      • 🔡Form Builder
      • 📢Publish Assets
    • 🧾Filament POS
      • 🌄Screenshots
      • 🏗️Installation
      • 📢Publish Assets
  • Learn
    • 🛍️Build E-Commerce
    • 🙏Task To Get Start
    • 🔴Use Github
    • 🔥Deploy Laravel App Using GitHub Actions
      • 🏯Install Cloudpanel
      • 🔓Link Cloudflare
      • 🔃Clone Repo
      • 🎇Workflow
      • 🦕Deploy Script
    • 🦄Awesome TailwindCSS
    • 💻Terminal
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Learn

Awesome TailwindCSS

PreviousDeploy ScriptNextTerminal

Last updated 1 year ago

Was this helpful?

our stack is VILT, so we use CSS TailwindCSS we now install these packages inside the Laravel app we created in the last step but before we start we need to install NPM & Yarn

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo bash -
sudo apt install -y nodejs vim
sudo apt install gcc g++ make
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn

now it's installed, let's start to build our frontend assets, first install TailwindCSS

yarn 
yarn watch

you can make your edits on the frontend file inside resources/js

Awesome Resources for Tailwind

🦄
Tailwind Kit
Gust UI
Merak UI
Windstrap
Tailwind Components
Kit Wind
Tailblocks
Tailwind Toolbox
Mamba UI
Kutty
Daisy UI
Flowbite
Tailwind UI Kit
Hyper UI
Post Src
Tailwind Elements