Merge pull request #32 from laravel-frontend-presets/chore/better-default-tailwind-config

Better default Tailwind config

Author: michaeldyrynda

README.md

@@ -2,7 +2,7 @@
 
 A Laravel front-end scaffolding preset for [Tailwind CSS](https://tailwindcss.com) - a Utility-First CSS Framework for Rapid UI Development.
 
-*Current version:* **Tailwind CSS 0.5.2**
+*Current version:* **Tailwind CSS 0.6.4**
 
 ## Usage
 
@@ -14,9 +14,9 @@ A Laravel front-end scaffolding preset for [Tailwind CSS](https://tailwindcss.co
 6. `php artisan migrate` to create basic user tables.
 7. `php artisan serve` (or equivalent) to run server and test preset.
 
-### Changing colours
+### Config
 
-If you want to change the default orange colour being used, update the `brand-{modifier}` values in your `tailwind.js` file. You are of course free to modify this file as you see fit, and even remove and replace the brand configuration in the scaffolded views entirely.
+The default `tailwind.js` configuration file included by this package simply uses the config from the Tailwind vendor files. Should you wish to make changes, you should remove the file and run `node_modules/.bin/tailwind init`, which will generate a fresh configuration file for you, which you are free to change to suit your needs.
 
 ### Screenshots
 

screenshots/dashboard.png

@@ -4,7 +4,7 @@
 <div class="flex items-center px-6 md:px-0">
     <div class="w-full max-w-md md:mx-auto">
         <div class="rounded shadow">
-            <div class="font-medium text-lg text-brand-darker bg-brand-lighter p-3 rounded-t">
+            <div class="font-medium text-lg text-teal-darker bg-teal p-3 rounded-t">
                 Login
             </div>
             <div class="bg-white p-3 rounded-b">
@@ -35,10 +35,10 @@
 
                     <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-semibold py-2 px-4 rounded mr-3">
+                            <button type="submit" class="bg-teal hover:bg-teal-dark text-white text-sm font-semibold py-2 px-4 rounded mr-3">
                                 Login
                             </button>
-                            <a class="no-underline hover:underline text-brand-dark text-sm" href="{{ route('password.request') }}">
+                            <a class="no-underline hover:underline text-teal-darker text-sm" href="{{ route('password.request') }}">
                                 Forgot Your Password?
                             </a>
                         </div>

screenshots/login.png

@@ -4,7 +4,7 @@
 <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-t">
+            <div class="font-medium text-lg text-teal-darker bg-teal p-3 rounded-t">
                 Reset Password
             </div>
             <div class="bg-white p-3 rounded-b">
@@ -27,7 +27,7 @@
 
                     <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">
+                            <button type="submit" class="bg-teal hover:bg-teal-dark text-white text-sm font-semibold py-2 px-4 rounded mr-3">
                                 Send Password Reset Link
                             </button>
                         </div>

screenshots/register.png

@@ -4,7 +4,7 @@
 <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-t">
+            <div class="font-medium text-lg text-teal-darker bg-teal p-3 rounded-t">
                 Reset Password
             </div>
             <div class="bg-white p-3 rounded-b">
@@ -39,7 +39,7 @@
 
                     <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">
+                            <button type="submit" class="bg-teal hover:bg-teal-dark text-white text-sm font-semibold py-2 px-4 rounded mr-3">
                                 Reset Password
                             </button>
                         </div>