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 | 14 +++++++++----- tailwind.config.js | 20 ++++++++++++++++++++ 8 files changed, 52 insertions(+), 7 deletions(-) create mode 100644 postcss.config.js create mode 100644 tailwind.config.js diff --git a/.env.example b/.env.example index 2a4a8b78..a1b3de4c 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 afa306bd..c3ea31b2 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 5605c28e..7e897140 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 5d678002..c38623a9 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 00000000..49c0612d --- /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 e69de29b..b5c61c95 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 54c3c382..979e82a6 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 00000000..ce0c57fc --- /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: [], +};