use tailwindcss, update namespacing

Author: michaeldyrynda

README.md

@@ -1,28 +1,19 @@
-# Tailwind CSS preset for the Laravel framework
+# Laravel 5.5.x Frontend preset for Tailwind CSS
 
 A Laravel front-end scaffolding preset for [Tailwind CSS](https://tailwindcss.com) - a Utility-First CSS Framework for Rapid UI Development.
 
-### Installing
-```bash
-composer require dyrynda/laravel-preset-tailwind
-```
+*Current version:* **Tailwind CSS 0.1.0**
 
-### Setting up the new preset
-```bash
-php artisan preset tailwind
-```
+## Usage
 
-### Auth scaffolding
-```bash
-php artisan preset tailwind-auth
-```
-
-### Compiling assets
-```bash
-npm install && npm run dev
-```
-
-Enjoy!
+1. Fresh install Laravel 5.5.x and cd to your app.
+2. Install this preset via `composer require laravel-frontend-presets/tailwindcss`. Laravel 5.5.x will automatically discover this package. No need to register the service provider.
+3. Use `php artisan preset tailwindcss` for the basic Tailwind CSS preset OR use `php artisan preset tailwindcss-auth` for the basic preset, auth route entry and Tailwind CSS auth views in one go. (NOTE: If you run this command several times, be sure to clean up the duplicate Auth entries in `routes/web.php`)
+4. `npm install`
+5. `npm run dev`
+6. Configure your favorite database (mysql, sqlite etc.)
+7. `php artisan migrate` to create basic user tables.
+8. `php artisan serve` (or equivalent) to run server and test preset.
 
 ### Changing colours
 

composer.json

@@ -1,20 +1,20 @@
 {
-    "name": "dyrynda/laravel-preset-tailwind",
-    "description": "Laravel 5.5 frontend preset for Tailwind",
-    "keywords": ["laravel", "preset", "tailwind"],
+    "name": "laravel-frontend-presets/tailwindcss",
+    "description": "Laravel 5.5 frontend preset for Tailwind CSS",
+    "keywords": ["laravel", "preset", "tailwindcss"],
     "license": "MIT",
     "require": {
         "laravel/framework": "5.5.*"
     },
     "autoload": {
         "psr-4": {
-            "Dyrynda\\LaravelPresets\\Tailwind\\": "src/"
+            "LaravelFrontendPresets\\TailwindCssPreset\\": "src/"
         }
     },
     "extra": {
         "laravel": {
             "providers": [
-                "Dyrynda\\LaravelPresets\\Tailwind\\TailwindPresetServiceProvider"
+                "LaravelFrontendPresets\\TailwindCssPreset\\TailwindCssPresetServiceProvider"
             ]
         }
     }

src/TailwindPreset.php renamed to src/TailwindCssPreset.php

@@ -1,13 +1,13 @@
 <?php
 
-namespace Dyrynda\LaravelPresets\Tailwind;
+namespace LaravelFrontendPresets\TailwindCssPreset;
 
 use Illuminate\Support\Arr;
 use Illuminate\Container\Container;
 use Illuminate\Filesystem\Filesystem;
 use Illuminate\Foundation\Console\Presets\Preset;
 
-class TailwindPreset extends Preset
+class TailwindCssPreset extends Preset
 {
     public static function install()
     {
@@ -41,21 +41,21 @@ protected static function updateStyles()
             mkdir(resource_path('assets/css'));
         }
 
-        copy(__DIR__.'/tailwind-stubs/resources/assets/css/main.css', resource_path('assets/css/main.css'));
+        copy(__DIR__.'/tailwindcss-stubs/resources/assets/css/main.css', resource_path('assets/css/main.css'));
     }
 
     protected static function updateBootstrapping()
     {
-        copy(__DIR__.'/tailwind-stubs/tailwind.js', base_path('tailwind.js'));
-        copy(__DIR__.'/tailwind-stubs/webpack.mix.js', base_path('webpack.mix.js'));
-        copy(__DIR__.'/tailwind-stubs/bootstrap.js', resource_path('assets/js/bootstrap.js'));
+        copy(__DIR__.'/tailwindcss-stubs/tailwind.js', base_path('tailwind.js'));
+        copy(__DIR__.'/tailwindcss-stubs/webpack.mix.js', base_path('webpack.mix.js'));
+        copy(__DIR__.'/tailwindcss-stubs/bootstrap.js', resource_path('assets/js/bootstrap.js'));
     }
 
     protected static function updateWelcomePage()
     {
         (new Filesystem)->delete(resource_path('views/welcome.blade.php'));
 
-        copy(__DIR__.'/tailwind-stubs/views/welcome.blade.php', resource_path('views/welcome.blade.php'));
+        copy(__DIR__.'/tailwindcss-stubs/views/welcome.blade.php', resource_path('views/welcome.blade.php'));
     }
 
     protected static function scaffoldAuth()
@@ -68,15 +68,15 @@ protected static function scaffoldAuth()
             FILE_APPEND
         );
 
-        (new Filesystem)->copyDirectory(__DIR__.'/tailwind-stubs/views', resource_path('views'));
+        (new Filesystem)->copyDirectory(__DIR__.'/tailwindcss-stubs/views', resource_path('views'));
     }
 
     protected static function compileControllerStub()
     {
         return str_replace(
             '{{namespace}}',
             Container::getInstance()->getNamespace(),
-            file_get_contents(__DIR__.'/tailwind-stubs/controllers/HomeController.stub')
+            file_get_contents(__DIR__.'/tailwindcss-stubs/controllers/HomeController.stub')
         );
     }
 }

src/TailwindPresetServiceProvider.php renamed to src/TailwindCssPresetServiceProvider.php

@@ -1,25 +1,25 @@
 <?php
 
-namespace Dyrynda\LaravelPresets\Tailwind;
+namespace LaravelFrontendPresets\TailwindCssPreset;
 
 use Illuminate\Support\ServiceProvider;
 use Illuminate\Foundation\Console\PresetCommand;
 
-class TailwindPresetServiceProvider extends ServiceProvider
+class TailwindCssPresetServiceProvider extends ServiceProvider
 {
     public function boot()
     {
-        PresetCommand::macro('tailwind', function ($command) {
+        PresetCommand::macro('tailwindcss', function ($command) {
             TailwindPreset::install();
 
-            $command->info('Tailwind scaffolding installed successfully.');
+            $command->info('Tailwind CSS scaffolding installed successfully.');
             $command->info('Please run "npm install && npm run dev" to compile your fresh scaffolding.');
         });
 
-        PresetCommand::macro('tailwind-auth', function ($command) {
+        PresetCommand::macro('tailwindcss-auth', function ($command) {
             TailwindPreset::installAuth();
 
-            $command->info('Tailwind scaffolding with auth views installed successfully.');
+            $command->info('Tailwind CSS scaffolding with auth views installed successfully.');
             $command->info('Please run "npm install && npm run dev" to compile your fresh scaffolding.');
         });
     }

src/tailwind-stubs/views/auth/passwords/reset.blade.php

@@ -128,13 +128,13 @@ var colors = {
   'pink-lighter': '#ffbbca',
   'pink-lightest': '#ffebef',
 
-  'brand-darkest': '#542605',
-  'brand-darker': '#7f4012',
-  'brand-dark': '#de751f',
-  'brand': '#f6993f',
-  'brand-light': '#faad63',
-  'brand-lighter': '#fcd9b6',
-  'brand-lightest': '#fff5eb',
+  get 'brand-darkest' () => this['orange-darkest'],
+  get 'brand-darker' () => this['orange-darker'],
+  get 'brand-dark' () => this['orange-dark'],
+  get 'brand' () => this['orange'],
+  get 'brand-light' () => this['orange-light'],
+  get 'brand-lighter' () => this['orange-lighter'],
+  get 'brand-lightest' () => this['orange-lightest'],
 }
 
 module.exports = {

src/tailwind-stubs/bootstrap.js renamed to src/tailwindcss-stubs/bootstrap.js

@@ -0,0 +1,52 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="flex items-center">
+    <div class="md:w-1/2 md:mx-auto">
+        <div class="rounded shadow">
+            <div class="font-medium text-lg text-brand-darker bg-brand-lighter p-3 rounded rounded-t">
+                Reset Password
+            </div>
+            <div class="bg-white p-3 rounded rounded-b">
+                <form class="form-horizontal" method="POST" action="{{ route('password.request') }}">
+                    {{ csrf_field() }}
+
+                    <input type="hidden" name="token" value="{{ $token }}">
+
+                    <div class="flex items-stretch mb-3">
+                        <label for="email" class="text-right font-semibold text-grey-dark text-sm pt-2 pr-3 align-middle w-1/4">E-Mail Address</label>
+                        <div class="flex flex-col w-3/4">
+                            <input id="email" type="email" class="flex-grow h-8 px-2 border rounded {{ $errors->has('email') ? 'border-red-dark' : 'border-grey-light' }}" name="email" value="{{ $email or old('email') }}" required autofocus>
+                            {!! $errors->first('email', '<span class="text-red-dark text-sm mt-2">:message</span>') !!}
+                        </div>
+                    </div>
+
+                    <div class="flex items-stretch mb-3">
+                        <label for="password" class="text-right font-semibold text-grey-dark text-sm pt-2 pr-3 align-middle w-1/4">Password</label>
+                        <div class="flex flex-col w-3/4">
+                            <input id="password" type="password" class="flex-grow h-8 px-2 rounded border {{ $errors->has('password') ? 'border-red-dark' : 'border-grey-light' }}" name="password" required>
+                            {!! $errors->first('password', '<span class="text-red-dark text-sm mt-2">:message</span>') !!}
+                        </div>
+                    </div>
+
+                    <div class="flex items-stretch mb-3">
+                        <label for="password_confirmation" class="text-right font-semibold text-grey-dark text-sm pt-2 pr-3 align-middle w-1/4">Confirm Password</label>
+                        <div class="flex flex-col w-3/4">
+                            <input id="password_confirmation" type="password" class="flex-grow h-8 px-2 rounded border {{ $errors->has('password_confirmation') ? 'border-red-dark' : 'border-grey-light' }}" name="password_confirmation" required>
+                            {!! $errors->first('password_confirmation', '<span class="text-red-dark text-sm mt-2">:message</span>') !!}
+                        </div>
+                    </div>
+
+                    <div class="flex">
+                        <div class="w-3/4 ml-auto">
+                            <button type="submit" class="bg-brand hover:bg-brand-dark text-white text-sm font-sembiold py-2 px-4 rounded mr-3">
+                                Reset Password
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection