├── .DS_Store
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── composer.json
└── src
    ├── Commands
        └── PresetCommand.php
    ├── LaravelVTPServiceProvider.php
    └── stubs
        ├── resources
            ├── css
            │   ├── app.css
            │   ├── customComponents.css
            │   └── customUtilities.css
            ├── js
            │   ├── app.js
            │   ├── bootstrap.js
            │   └── components
            │   │   └── ExampleComponent.vue
            └── views
            │   ├── layouts
            │       └── app.blade.php
            │   └── welcome.blade.php
        └── webpack.mix.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Carloosolrac/Laravel-Vue-Tailwind-PurgeCSS/7b7d25a14def003443d97db73c3a801dba32f33a/.DS_Store


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 | 
3 | All notable changes to `laravel-vue-tailwind-purgecss` will be documented in this file
4 | 
5 | ## 0.1.0 - 2020-09-18
6 | 
7 | - initial release
8 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Carloosolrac
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Laravel 8 VueTailwindPurgeCSS
 2 | 
 3 | [![Latest Version on Packagist](https://img.shields.io/packagist/v/carloosolrac/laravel-vue-tailwind-purgecss.svg?style=flat-square)](https://packagist.org/packages/carloosolrac/laravel-vue-tailwind-purgecss)
 4 | [![Total Downloads](https://img.shields.io/packagist/dt/carloosolrac/laravel-vue-tailwind-purgecss.svg?style=flat-square)](https://packagist.org/packages/carloosolrac/laravel-vue-tailwind-purgecss)
 5 | 
 6 | 
 7 | A simple way to install Vue, Tailwind and PurgeCSS in Laravel 8 projects without `laravel/ui:3.0` or `Jetstream`.
 8 | 
 9 | **What it includes:**
10 | - [Vue.js](https://vuejs.org/)
11 | - [Tailwind CSS](https://tailwindcss.com)
12 | - [Purgecss](https://www.purgecss.com/), by [spatie/laravel-mix-purgecss](https://github.com/spatie/laravel-mix-purgecss)
13 | 
14 | **Additionals:**
15 | - [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) 
16 | - `ExampleComponent` is back!
17 | - Replaces the `welcome.blade.php` template with one that extends the main layout `layouts/app.blade.php`
18 | - Two CSS files for custom components and custom utilities, **don't be afraid to extend it!**
19 | - `Webpack.mix.js` configured just the way I like it.
20 | 
21 | ## Installation
22 | 
23 | You can install the package via composer in your fresh Laravel 8 project:
24 | 
25 | ```bash
26 | composer require carloosolrac/laravel-vue-tailwind-purgecss
27 | ```
28 | 
29 | ## Usage
30 | 
31 | After you install it, just execute this command.
32 | 
33 | ``` bash
34 | php artisan preset:vtp
35 | ```
36 | 
37 | > :warning: This command delete some foldes, replaces some files and edit another ones. **Use it with precaution** 
38 | 
39 | Then, you need install npm dependencies and create the Tailwind config file.
40 | 
41 | ```bash 
42 | npm install && npx tailwind init && npm run dev
43 | ```
44 | 
45 | If you want a full Tailwind config you can run the next command:
46 | 
47 | ```bash
48 | npm install && npx tailwind init --full && npm run dev
49 | ```
50 | 
51 | ## Uninstall
52 | 
53 | When you complete the instalation, configuration you can remove this packages from you project as well.
54 | 
55 | ## Changelog
56 | 
57 | Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
58 | 
59 | 
60 | ## License
61 | 
62 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
63 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "carloosolrac/laravel-vue-tailwind-purgecss",
 3 |     "description": "A simple way to install Vue, Tailwind and PurgeCSS",
 4 |     "keywords": [
 5 |         "carloosolrac",
 6 |         "laravel-vue-tailwind-purgecss"
 7 |     ],
 8 |     "homepage": "https://github.com/carloosolrac/laravel-vue-tailwind-purgecss",
 9 |     "license": "MIT",
10 |     "authors": [
11 |         {
12 |             "name": "Carloosolrac",
13 |             "email": "carlos@solrac.cl",
14 |             "homepage": "https://www.solrac.cl",
15 |             "role": "Developer"
16 |         }
17 |     ],
18 |     "require": {
19 |         "php": "^7.4",
20 |         "illuminate/contracts": "^8.0"
21 |     },
22 |     "autoload": {
23 |         "psr-4": {
24 |             "Carloosolrac\\LaravelVTP\\": "src"
25 |         }
26 |     },
27 |     "config": {
28 |         "sort-packages": true
29 |     },
30 |     "extra": {
31 |         "laravel": {
32 |             "providers": [
33 |                 "Carloosolrac\\LaravelVTP\\LaravelVTPServiceProvider"
34 |             ]
35 |         }
36 |     },
37 |     "minimum-stability": "dev",
38 |     "prefer-stable": true
39 | }
40 | 


--------------------------------------------------------------------------------
/src/Commands/PresetCommand.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Carloosolrac\LaravelVTP\Commands;
  4 | 
  5 | use Illuminate\Console\Command;
  6 | use Illuminate\Filesystem\Filesystem;
  7 | use Symfony\Component\Process\Process;
  8 | 
  9 | class PresetCommand extends Command
 10 | {
 11 |     public $signature = 'preset:vtp';
 12 | 
 13 |     public $description = 'A simple way to install Vue, Tailwind and PurgeCSS';
 14 | 
 15 |     public function handle()
 16 |     {
 17 |         $this->updatePackages();
 18 |         $this->updateWebpack();
 19 |         $this->removeStuffs();
 20 |         $this->updateCss();
 21 |         $this->updateJS();
 22 |         $this->createExampleComponent();
 23 |         $this->updateTemplates();
 24 | 
 25 |         $this->info('Laravel Tailwind Preset installed successfully.');
 26 |         $this->info('Please run "npm install && npx tailwind init && npm run dev" to install all stuffs.');
 27 |     }
 28 | 
 29 |     private function updatePackages($dev = true)
 30 |     {
 31 |         if (!file_exists(base_path('package.json'))) {
 32 |             return;
 33 |         }
 34 | 
 35 |         $configurationKey = $dev ? 'devDependencies' : 'dependencies';
 36 | 
 37 |         $packages = json_decode(file_get_contents(base_path('package.json')), true);
 38 | 
 39 |         $packages[$configurationKey] = $this->updatePackageArray(
 40 |             array_key_exists($configurationKey, $packages) ? $packages[$configurationKey] : [],
 41 |             $configurationKey
 42 |         );
 43 | 
 44 |         ksort($packages[$configurationKey]);
 45 | 
 46 |         file_put_contents(
 47 |             base_path('package.json'),
 48 |             json_encode($packages, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) . PHP_EOL
 49 |         );
 50 |     }
 51 | 
 52 | 
 53 |     private function updatePackageArray(array $packages)
 54 |     {
 55 |         return array_merge([
 56 |             'vue' => '^2.6.12',
 57 |             'tailwindcss' => '^1.8.10',
 58 |             'laravel-mix-purgecss' => '^5.0.0',
 59 |             'postcss-import' => '^12.0.1',
 60 |             'postcss-nesting' => '^7.0.1',
 61 |         ], $packages);
 62 |     }
 63 | 
 64 |     private function updateWebpack()
 65 |     {
 66 |         copy(__DIR__ . '/../stubs/webpack.mix.js', base_path('webpack.mix.js'));
 67 |     }
 68 | 
 69 |     private function removeStuffs()
 70 |     {
 71 |         tap(new Filesystem, function ($files) {
 72 |             $files->deleteDirectory(resource_path('sass'));
 73 |             $files->delete(public_path('js/app.js'));
 74 |             $files->delete(public_path('css/app.css'));
 75 | 
 76 |             $files->delete(resource_path('views/welcome.blade.php'));
 77 | 
 78 |             $files->deleteDirectory(base_path('node_modules'));
 79 | 
 80 |             $files->delete(base_path('yarn.lock'));
 81 |         });
 82 |     }
 83 | 
 84 |     private function updateCss()
 85 |     {
 86 |         tap(new Filesystem, function ($files) {
 87 |             if (!$files->isDirectory($directory = resource_path('css'))) {
 88 |                 $files->makeDirectory($directory, 0755, true);
 89 |             }
 90 |         });
 91 | 
 92 |         copy(__DIR__ . '/../stubs/resources/css/app.css', resource_path('css/app.css'));
 93 |         copy(__DIR__ . '/../stubs/resources/css/customComponents.css', resource_path('css/customComponents.css'));
 94 |         copy(__DIR__ . '/../stubs/resources/css/customUtilities.css', resource_path('css/customUtilities.css'));
 95 |     }
 96 | 
 97 |     private function updateJS()
 98 |     {
 99 |         copy(__DIR__ . '/../stubs/resources/js/app.js', resource_path('js/app.js'));
100 |         copy(__DIR__ . '/../stubs/resources/js/bootstrap.js', resource_path('js/bootstrap.js'));
101 |     }
102 | 
103 |     private function createExampleComponent()
104 |     {
105 |         tap(new Filesystem, function ($files) {
106 |             if (!$files->isDirectory($directory = resource_path('js/components'))) {
107 |                 $files->makeDirectory($directory, 0755, true);
108 |             }
109 |         });
110 | 
111 |         copy(__DIR__ . '/../stubs/resources/js/components/ExampleComponent.vue', resource_path('js/components/ExampleComponent.vue'));
112 |     }
113 | 
114 |     private function updateTemplates()
115 |     {
116 |         tap(new Filesystem, function ($files) {
117 |             $files->copyDirectory(__DIR__ . '/../stubs/resources/views', resource_path('views'));
118 |         });
119 |     }
120 | }
121 | 


--------------------------------------------------------------------------------
/src/LaravelVTPServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Carloosolrac\LaravelVTP;
 4 | 
 5 | use Illuminate\Support\ServiceProvider;
 6 | use Carloosolrac\LaravelVTP\Commands\PresetCommand;
 7 | 
 8 | class LaravelVTPServiceProvider extends ServiceProvider
 9 | {
10 |     public function boot()
11 |     {
12 |         if ($this->app->runningInConsole()) {
13 |             $this->commands([
14 |                 PresetCommand::class,
15 |             ]);
16 |         }
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/stubs/resources/css/app.css:
--------------------------------------------------------------------------------
 1 | /* purgecss start ignore */
 2 | @import "tailwindcss/base";
 3 | 
 4 | @import "tailwindcss/components";
 5 | @import './customComponents.css';
 6 | /* purgecss end ignore */
 7 | 
 8 | @import "tailwindcss/utilities";
 9 | @import './customUtilities.css';
10 | 
11 | 


--------------------------------------------------------------------------------
/src/stubs/resources/css/customComponents.css:
--------------------------------------------------------------------------------
1 | /* ... */


--------------------------------------------------------------------------------
/src/stubs/resources/css/customUtilities.css:
--------------------------------------------------------------------------------
1 | /* ... */


--------------------------------------------------------------------------------
/src/stubs/resources/js/app.js:
--------------------------------------------------------------------------------
1 | require('./bootstrap');
2 | 
3 | window.Vue = require('vue');
4 | 
5 | Vue.component('ExampleComponent', require('./components/ExampleComponent.vue').default);
6 | 
7 | const app = new Vue({
8 |     el: '#app'
9 | });


--------------------------------------------------------------------------------
/src/stubs/resources/js/bootstrap.js:
--------------------------------------------------------------------------------
 1 | window._ = require('lodash');
 2 | 
 3 | /**
 4 |  * We'll load the axios HTTP library which allows us to easily issue requests
 5 |  * to our Laravel back-end. This library automatically handles sending the
 6 |  * CSRF token as a header based on the value of the "XSRF" token cookie.
 7 |  */
 8 | 
 9 | window.axios = require('axios');
10 | 
11 | window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
12 | 
13 | /**
14 |  * Echo exposes an expressive API for subscribing to channels and listening
15 |  * for events that are broadcast by Laravel. Echo and event broadcasting
16 |  * allows your team to easily build robust real-time web applications.
17 |  */
18 | 
19 | // import Echo from 'laravel-echo';
20 | 
21 | // window.Pusher = require('pusher-js');
22 | 
23 | // window.Echo = new Echo({
24 | //     broadcaster: 'pusher',
25 | //     key: process.env.MIX_PUSHER_APP_KEY,
26 | //     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
27 | //     forceTLS: true
28 | // });
29 | 


--------------------------------------------------------------------------------
/src/stubs/resources/js/components/ExampleComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="px-4 py-4 bg-white shadow-xl">
 3 |       <h1 class="text-2xl font-bold text-gray-700">My first component</h1>
 4 |       <p class="text-gray-600">
 5 |         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente impedit esse perspiciatis nemo maxime, dolores eveniet iure consequatur libero sed quidem. Deserunt quia libero ipsam, officiis tempore aperiam similique aliquam.
 6 |       </p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 | 
13 | }
14 | </script>


--------------------------------------------------------------------------------
/src/stubs/resources/views/layouts/app.blade.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ app()->getLocale() }}">
 3 | 
 4 |     <head>
 5 |         <meta charset="utf-8">
 6 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |         <meta name="Description" content="blah blah">
 9 |         <meta name="csrf-token" content="{{ csrf_token() }}">
10 |         <link rel="stylesheet" href="{{ mix('css/app.css') }}">
11 |         <title>{{ config('app.name', 'Laravel') }}</title>
12 |     </head>
13 | 
14 |     <body>
15 | 
16 |         <div class="flex flex-col min-h-screen" id="app">
17 |             <header class="flex items-center justify-between bg-gray-900 shadow-lg">
18 |                 <div class="flex justify-between w-full px-4 py-2 sm:w-48">
19 |                     <div class="text-lg font-bold text-white">
20 |                         <span class="brand">Laravel</span>
21 |                     </div>
22 |                     <div class="block sm:hidden">
23 |                         <button type="button" class="text-gray-500 hover:text-white focus:outline-none focus:text-white">
24 |                             <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
25 |                                 <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
26 |                             </svg>
27 |                         </button>
28 |                     </div>
29 |                 </div>
30 |                 <nav class="hidden w-full px-4 py-2 sm:flex sm:items-center sm:justify-between">
31 |                     <div>
32 |                         <input class="block px-4 py-2 text-gray-200 bg-gray-800 border border-transparent rounded-lg focus:outline-none focus:bg-gray-700 focus:border-gray-700" placeholder="Search...">
33 |                     </div>
34 |                     <div>
35 |                         <a href="#" class="px-3 py-2 font-semibold text-gray-500 rounded hover:bg-gray-800">Home</a>
36 |                         <a href="#" class="px-3 py-2 font-semibold text-gray-500 rounded hover:bg-gray-800">Login</a>
37 |                         <a href="#" class="px-3 py-2 font-semibold text-gray-500 rounded hover:bg-gray-800">Register</a>
38 |                     </div>
39 |                 </nav>
40 |             </header>
41 |     
42 |             <div class="flex-1 h-full bg-gray-400">
43 |                 @yield('content')
44 |             </div>
45 | 
46 |             <footer class="px-4 py-5 text-gray-800 bg-gray-300">
47 |                 <div class="text-sm text-center">
48 |                     Here is my footer.
49 |                 </div>
50 |             </footer>
51 |         </div>
52 | 
53 |         <script src="{{ mix('js/app.js') }}"></script>
54 |     </body>
55 | </html>


--------------------------------------------------------------------------------
/src/stubs/resources/views/welcome.blade.php:
--------------------------------------------------------------------------------
1 | @extends('layouts.app')
2 | 
3 | @section('content')
4 |     <div class="container mx-auto">
5 |         <Example-Component></Example-Component>
6 |     </div>
7 | @endsection


--------------------------------------------------------------------------------
/src/stubs/webpack.mix.js:
--------------------------------------------------------------------------------
 1 | const mix = require('laravel-mix');
 2 | require('laravel-mix-purgecss');
 3 | 
 4 | // JS
 5 | mix.js('resources/js/app.js', 'public/js');
 6 | 
 7 | // CSS
 8 | mix
 9 | .postCss('resources/css/app.css', 'public/css')
10 |   .options({
11 |     postCss: [
12 |       require('postcss-import')(),
13 |       require('tailwindcss')('tailwind.config.js'),
14 |       require('postcss-nesting')(),
15 |     ]
16 | })
17 | .purgeCss({
18 |     enabled: mix.inProduction(),
19 |     folders: ['src', 'templates'],
20 |     extensions: ['html', 'js', 'php', 'vue'],
21 | });
22 | 
23 | if (mix.inProduction()) {
24 |     mix.version()
25 | }


--------------------------------------------------------------------------------