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 2a4a8b781..a1b3de4cd 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 afa306bdb..c3ea31b27 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 5605c28ef..7e8971403 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 5d678002f..c38623a97 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 000000000..49c0612d5 --- /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 e69de29bb..b5c61c956 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 54c3c382a..979e82a6c 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 000000000..ce0c57fcc --- /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: [], +};