Skip to content

Commit 354dcfb

Browse files
michaeldyryndamichaeldyrynda
authored
Merge pull request #32 from laravel-frontend-presets/chore/better-default-tailwind-config
Better default Tailwind config
2 parents 1440903 + 5ef3b0c commit 354dcfb

File tree

15 files changed

+31
-930
lines changed

15 files changed

+31
-930
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
A Laravel front-end scaffolding preset for [Tailwind CSS](https://tailwindcss.com) - a Utility-First CSS Framework for Rapid UI Development.
44

5-
*Current version:* **Tailwind CSS 0.5.2**
5+
*Current version:* **Tailwind CSS 0.6.4**
66

77
## Usage
88

@@ -14,9 +14,9 @@ A Laravel front-end scaffolding preset for [Tailwind CSS](https://tailwindcss.co
1414
6. `php artisan migrate` to create basic user tables.
1515
7. `php artisan serve` (or equivalent) to run server and test preset.
1616

17-
### Changing colours
17+
### Config
1818

19-
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.
19+
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.
2020

2121
### Screenshots
2222

‎screenshots/dashboard.png

-24 KB
Loading

‎screenshots/login.png

-28.1 KB
Loading

‎screenshots/register.png

-28.5 KB
Loading

‎screenshots/reset-password.png

-28.8 KB
Loading

‎screenshots/send-password-reset.png

-25.6 KB
Loading

‎screenshots/welcome.png

-30.4 KB
Loading

‎src/tailwindcss-stubs/resources/views/auth/login.blade.php

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="flex items-center px-6 md:px-0">
55
<div class="w-full max-w-md md:mx-auto">
66
<div class="rounded shadow">
7-
<div class="font-medium text-lg text-brand-darker bg-brand-lighter p-3 rounded-t">
7+
<div class="font-medium text-lg text-teal-darker bg-teal p-3 rounded-t">
88
Login
99
</div>
1010
<div class="bg-white p-3 rounded-b">
@@ -35,10 +35,10 @@
3535

3636
<div class="flex">
3737
<div class="w-3/4 ml-auto">
38-
<button type="submit" class="bg-brand hover:bg-brand-dark text-white text-sm font-semibold py-2 px-4 rounded mr-3">
38+
<button type="submit" class="bg-teal hover:bg-teal-dark text-white text-sm font-semibold py-2 px-4 rounded mr-3">
3939
Login
4040
</button>
41-
<a class="no-underline hover:underline text-brand-dark text-sm" href="{{ route('password.request') }}">
41+
<a class="no-underline hover:underline text-teal-darker text-sm" href="{{ route('password.request') }}">
4242
Forgot Your Password?
4343
</a>
4444
</div>

‎src/tailwindcss-stubs/resources/views/auth/passwords/email.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="flex items-center">
55
<div class="md:w-1/2 md:mx-auto">
66
<div class="rounded shadow">
7-
<div class="font-medium text-lg text-brand-darker bg-brand-lighter p-3 rounded-t">
7+
<div class="font-medium text-lg text-teal-darker bg-teal p-3 rounded-t">
88
Reset Password
99
</div>
1010
<div class="bg-white p-3 rounded-b">
@@ -27,7 +27,7 @@
2727

2828
<div class="flex">
2929
<div class="w-3/4 ml-auto">
30-
<button type="submit" class="bg-brand hover:bg-brand-dark text-white text-sm font-sembiold py-2 px-4 rounded mr-3">
30+
<button type="submit" class="bg-teal hover:bg-teal-dark text-white text-sm font-semibold py-2 px-4 rounded mr-3">
3131
Send Password Reset Link
3232
</button>
3333
</div>

‎src/tailwindcss-stubs/resources/views/auth/passwords/reset.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="flex items-center">
55
<div class="md:w-1/2 md:mx-auto">
66
<div class="rounded shadow">
7-
<div class="font-medium text-lg text-brand-darker bg-brand-lighter p-3 rounded-t">
7+
<div class="font-medium text-lg text-teal-darker bg-teal p-3 rounded-t">
88
Reset Password
99
</div>
1010
<div class="bg-white p-3 rounded-b">
@@ -39,7 +39,7 @@
3939

4040
<div class="flex">
4141
<div class="w-3/4 ml-auto">
42-
<button type="submit" class="bg-brand hover:bg-brand-dark text-white text-sm font-sembiold py-2 px-4 rounded mr-3">
42+
<button type="submit" class="bg-teal hover:bg-teal-dark text-white text-sm font-semibold py-2 px-4 rounded mr-3">
4343
Reset Password
4444
</button>
4545
</div>

‎src/tailwindcss-stubs/resources/views/auth/register.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="flex items-center px-6 md:px-0">
55
<div class="w-full max-w-md md:mx-auto">
66
<div class="rounded shadow">
7-
<div class="font-medium text-lg text-brand-darker bg-brand-lighter p-3 rounded-t">
7+
<div class="font-medium text-lg text-teal-darker bg-teal p-3 rounded-t">
88
Register
99
</div>
1010
<div class="bg-white p-3 rounded-b">
@@ -45,7 +45,7 @@
4545

4646
<div class="flex">
4747
<div class="w-3/4 ml-auto">
48-
<button type="submit" class="bg-brand hover:bg-brand-dark text-white text-sm font-sembiold py-2 px-4 rounded mr-3">
48+
<button type="submit" class="bg-teal hover:bg-teal-dark text-white text-sm font-semibold py-2 px-4 rounded mr-3">
4949
Register
5050
</button>
5151
</div>

‎src/tailwindcss-stubs/resources/views/home.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="flex items-center">
55
<div class="md:w-1/2 md:mx-auto">
66
<div class="rounded shadow">
7-
<div class="font-medium text-lg text-brand-darker bg-brand-lighter p-3 rounded-t">
7+
<div class="font-medium text-lg text-teal-darker bg-teal p-3 rounded-t">
88
Dashboard
99
</div>
1010
<div class="bg-white p-3 rounded-b">
@@ -14,7 +14,7 @@
1414
</div>
1515
@endif
1616

17-
<p class="text-grey-dark text-sm">
17+
<p class="text-grey-dark">
1818
You are logged in!
1919
</p>
2020
</div>

‎src/tailwindcss-stubs/resources/views/layouts/app.blade.php

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,25 @@
1313
<!-- Styles -->
1414
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
1515
</head>
16-
<body class="bg-brand-lightest h-screen">
16+
<body class="bg-teal-lightest h-screen antialiased">
1717
<div id="app">
1818
<nav class="bg-white h-12 shadow mb-8 px-6 md:px-0">
1919
<div class="container mx-auto h-full">
2020
<div class="flex items-center justify-center h-12">
2121
<div class="mr-6">
22-
<a href="{{ url('/') }}" class="no-underline">
22+
<a href="{{ url('/') }}" class="text-lg font-hairline text-teal-darker no-underline hover:underline">
2323
{{ config('app.name', 'Laravel') }}
2424
</a>
2525
</div>
2626
<div class="flex-1 text-right">
2727
@guest
28-
<a class="no-underline hover:underline text-grey-darker pr-3 text-sm" href="{{ url('/login') }}">Login</a>
29-
<a class="no-underline hover:underline text-grey-darker text-sm" href="{{ url('/register') }}">Register</a>
28+
<a class="no-underline hover:underline text-teal-darker pr-3 text-sm" href="{{ url('/login') }}">Login</a>
29+
<a class="no-underline hover:underline text-teal-darker text-sm" href="{{ url('/register') }}">Register</a>
3030
@else
31-
<span class="text-grey-darker text-sm pr-4">{{ Auth::user()->name }}</span>
31+
<span class="text-teal-darker text-sm pr-4">{{ Auth::user()->name }}</span>
3232

3333
<a href="{{ route('logout') }}"
34-
class="no-underline hover:underline text-grey-darker text-sm"
34+
class="no-underline hover:underline text-teal-darker text-sm"
3535
onclick="event.preventDefault();
3636
document.getElementById('logout-form').submit();">Logout</a>
3737
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">

‎src/tailwindcss-stubs/resources/views/welcome.blade.php

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,40 +13,40 @@
1313
<!-- Styles -->
1414
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
1515
</head>
16-
<body class="bg-brand-lightest font-sans font-normal">
16+
<body class="bg-teal-lightest font-sans font-normal antialiased">
1717
<div class="flex flex-col">
1818
@if(Route::has('login'))
1919
<div class="absolute pin-t pin-r mt-4 mr-4">
2020
@auth
21-
<a href="{{ url('/home') }}" class="no-underline hover:underline text-sm font-normal text-brand-dark uppercase">Home</a>
21+
<a href="{{ url('/home') }}" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase">Home</a>
2222
@else
23-
<a href="{{ route('login') }}" class="no-underline hover:underline text-sm font-normal text-brand-dark uppercase pr-6">Login</a>
24-
<a href="{{ route('register') }}" class="no-underline hover:underline text-sm font-normal text-brand-dark uppercase">Register</a>
23+
<a href="{{ route('login') }}" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase pr-6">Login</a>
24+
<a href="{{ route('register') }}" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase">Register</a>
2525
@endauth
2626
</div>
2727
@endif
2828

2929
<div class="min-h-screen flex items-center justify-center">
3030
<div class="flex flex-col justify-around h-full">
3131
<div>
32-
<h1 class="text-grey-darker text-center font-hairline tracking-wide text-7xl mb-6">
32+
<h1 class="text-grey-darker text-center font-thin tracking-wide text-5xl mb-6">
3333
{{ config('app.name', 'Laravel') }}
3434
</h1>
3535
<ul class="list-reset">
3636
<li class="inline pr-8">
37-
<a href="https://laravel.com/docs" class="no-underline hover:underline text-sm font-normal text-brand-dark uppercase" title="Documentation">Documentation</a>
37+
<a href="https://laravel.com/docs" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase" title="Documentation">Documentation</a>
3838
</li>
3939
<li class="inline pr-8">
40-
<a href="https://laracasts.com" class="no-underline hover:underline text-sm font-normal text-brand-dark uppercase" title="Laracasts">Laracasts</a>
40+
<a href="https://laracasts.com" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase" title="Laracasts">Laracasts</a>
4141
</li>
4242
<li class="inline pr-8">
43-
<a href="https://laravel-news.com" class="no-underline hover:underline text-sm font-normal text-brand-dark uppercase" title="News">News</a>
43+
<a href="https://laravel-news.com" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase" title="News">News</a>
4444
</li>
4545
<li class="inline pr-8">
46-
<a href="https://forge.laravel.com" class="no-underline hover:underline text-sm font-normal text-brand-dark uppercase" title="Forge">Forge</a>
46+
<a href="https://forge.laravel.com" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase" title="Forge">Forge</a>
4747
</li>
4848
<li class="inline pr-8">
49-
<a href="https://github.com/laravel/laravel" class="no-underline hover:underline text-sm font-normal text-brand-dark uppercase" title="GitHub">GitHub</a>
49+
<a href="https://github.com/laravel/laravel" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase" title="GitHub">GitHub</a>
5050
</li>
5151
</ul>
5252
</div>

0 commit comments

Comments
 (0)