From b378ce946a05b5ab80776c3b5e40fa84751084bd Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Thu, 10 Oct 2024 14:21:56 -0500 Subject: [PATCH] Add Tailwind, "composer run dev" (#6463) This PR does two things... First, it adds a basic Tailwind configuration out of the box. This lets you start using Tailwind immediately without installing any starter kit. Useful if you just want to mess around or build things from scratch. Second, it adds a composer run dev script, which starts php artisan serve, php artisan queue:listen --tries=1, php artisan pail (now a dev dependency by default), and npm run dev all in one command, with color coded output in the terminal using concurrently. --- .env.example | 2 ++ .gitignore | 1 + composer.json | 5 +++++ package.json | 8 ++++++-- postcss.config.js | 6 ++++++ resources/css/app.css | 3 +++ resources/views/welcome.blade.php | 16 ++++++++++------ tailwind.config.js | 20 ++++++++++++++++++++ 8 files changed, 53 insertions(+), 8 deletions(-) create mode 100644 postcss.config.js create mode 100644 tailwind.config.js diff --git a/.env.example b/.env.example index 2a4a8b781c1..a1b3de4cd1b 100644 --- a/.env.example +++ b/.env.example @@ -12,6 +12,8 @@ APP_FAKER_LOCALE=en_US APP_MAINTENANCE_DRIVER=file # APP_MAINTENANCE_STORE=database +PHP_CLI_SERVER_WORKERS=4 + BCRYPT_ROUNDS=12 LOG_CHANNEL=stack diff --git a/.gitignore b/.gitignore index afa306bdb78..c3ea31b27b8 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ /public/hot /public/storage /storage/*.key +/storage/pail /vendor .env .env.backup diff --git a/composer.json b/composer.json index 5605c28efdb..7e89714037d 100644 --- a/composer.json +++ b/composer.json @@ -11,6 +11,7 @@ }, "require-dev": { "fakerphp/faker": "^1.23", + "laravel/pail": "^1.1", "laravel/pint": "^1.13", "laravel/sail": "^1.26", "mockery/mockery": "^1.6", @@ -44,6 +45,10 @@ "@php artisan key:generate --ansi", "@php -r \"file_exists('database/database.sqlite') || touch('database/database.sqlite');\"", "@php artisan migrate --graceful --ansi" + ], + "dev": [ + "Composer\\Config::disableProcessTimeout", + "npx concurrently -k -c \"#93c5fd,#c4b5fd,#d4d4d8,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail\" \"npm run dev\" --names=server,queue,logs,vite" ] }, "extra": { diff --git a/package.json b/package.json index 5d678002fe3..c38623a9779 100644 --- a/package.json +++ b/package.json @@ -2,12 +2,16 @@ "private": true, "type": "module", "scripts": { - "dev": "vite", - "build": "vite build" + "build": "vite build", + "dev": "vite" }, "devDependencies": { + "autoprefixer": "^10.4.20", "axios": "^1.7.4", + "concurrently": "^9.0.1", "laravel-vite-plugin": "^1.0", + "postcss": "^8.4.47", + "tailwindcss": "^3.4.13", "vite": "^5.0" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000000..49c0612d5c2 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/resources/css/app.css b/resources/css/app.css index e69de29bb2d..b5c61c95671 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php index 54c3c382aa0..979e82a6ce3 100644 --- a/resources/views/welcome.blade.php +++ b/resources/views/welcome.blade.php @@ -8,12 +8,16 @@ - - - - + + + + @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot'))) + @vite(['resources/css/app.css', 'resources/js/app.js']) + @else + + @endif
diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 00000000000..ce0c57fccca --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,20 @@ +import defaultTheme from 'tailwindcss/defaultTheme'; + +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php', + './storage/framework/views/*.php', + './resources/**/*.blade.php', + './resources/**/*.js', + './resources/**/*.vue', + ], + theme: { + extend: { + fontFamily: { + sans: ['Figtree', ...defaultTheme.fontFamily.sans], + }, + }, + }, + plugins: [], +};