Skip to content

Commit 5cb8f1e

Browse files
michaeldyryndamichaeldyrynda
authored
Merge pull request #48 from rverrips/master
Updated Views for Tailwindcss v1
2 parents c2c1cb6 + fb51206 commit 5cb8f1e

22 files changed

+136
-82
lines changed

‎README.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,30 @@
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.6.6**
5+
*Current version:* **Tailwind CSS 1.0**
66

77
## Usage
88

99
1. Fresh install Laravel >= 5.7.0 and cd to your app.
1010
2. Install this preset via `composer require laravel-frontend-presets/tailwindcss`. Laravel will automatically discover this package. No need to register the service provider.
11-
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`)
12-
4. `npm install && npm run dev && npm run dev` (this is required twice, due to the way that `laravel-mix-tailwind` installs the Tailwind CSS dependency)
11+
12+
### For Presets without Authentication
13+
14+
1. Use `php artisan preset tailwindcss` for the basic Tailwind CSS preset
15+
2. `npm install && npm run dev`
16+
3. `php artisan serve` (or equivalent) to run server and test preset.
17+
18+
### For Presets with Authentication
19+
20+
1. 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`)
21+
4. `npm install && npm run dev`
1322
5. Configure your favorite database (mysql, sqlite etc.)
1423
6. `php artisan migrate` to create basic user tables.
1524
7. `php artisan serve` (or equivalent) to run server and test preset.
1625

1726
### Config
1827

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.
28+
The default `tailwind.config.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.
2029

2130
### Screenshots
2231

@@ -26,8 +35,6 @@ The default `tailwind.js` configuration file included by this package simply use
2635

2736
![Login](/screenshots/login.png)
2837

29-
![Send Password Reset](/screenshots/send-password-reset.png)
30-
3138
![Reset Password](/screenshots/reset-password.png)
3239

3340
![Dashboard](/screenshots/dashboard.png)

‎screenshots/dashboard.png

-71.8 KB
Loading

‎screenshots/login.png

-81.3 KB
Loading

‎screenshots/register.png

-85.2 KB
Loading

‎screenshots/reset-password.png

-84.4 KB
Loading

‎screenshots/send-password-reset.png

-108 KB
Binary file not shown.

‎screenshots/verify.png

-56 KB
Loading

‎screenshots/welcome.png

-70.4 KB
Loading

‎src/TailwindCssPreset.php

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,13 @@ protected static function updatePackageArray(array $packages)
3030
'laravel-mix' => '^4.0.14',
3131
'laravel-mix-purgecss' => '^4.1',
3232
'laravel-mix-tailwind' => '^0.1.0',
33-
'tailwindcss' => '^0.7.4',
33+
'tailwindcss' => 'next',
3434
'vue' => '^2.5.17',
3535
'vue-template-compiler' => '^2.6.4',
3636
], Arr::except($packages, [
3737
'bootstrap',
3838
'bootstrap-sass',
39+
'popper.js',
3940
'laravel-mix',
4041
'jquery',
4142
]));
@@ -58,7 +59,7 @@ protected static function updateStyles()
5859

5960
protected static function updateBootstrapping()
6061
{
61-
copy(__DIR__.'/tailwindcss-stubs/tailwind.js', base_path('tailwind.js'));
62+
copy(__DIR__.'/tailwindcss-stubs/tailwind.config.js', base_path('tailwind.config.js'));
6263

6364
copy(__DIR__.'/tailwindcss-stubs/webpack.mix.js', base_path('webpack.mix.js'));
6465

‎src/tailwindcss-stubs/resources/css/app.css

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@
33
* Normalize.css and some additional base styles.
44
*
55
* You can see the styles here:
6-
* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
6+
* https://github.com/tailwindcss/tailwindcss/blob/master/css/base.css
7+
*
8+
* If using `postcss-import`, use this import instead:
9+
*
10+
* @import "tailwindcss/base";
711
*/
8-
@tailwind preflight;
12+
@tailwind base;
913

1014
/**
1115
* This injects any component classes registered by plugins.
@@ -26,7 +30,7 @@
2630
* .btn { ... }
2731
* .form-input { ... }
2832
*
29-
* Or if using a preprocessor:
33+
* Or if using a preprocessor or `postcss-import`:
3034
*
3135
* @import "components/buttons";
3236
* @import "components/forms";

‎src/tailwindcss-stubs/resources/js/bootstrap.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
window._ = require('lodash');
2-
window.Popper = require('popper.js').default;
2+
3+
/**
4+
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
5+
* for JavaScript based Bootstrap features such as modals and tabs. This
6+
* code may be modified to fit the specific needs of your application.
7+
*/
8+
9+
// try {
10+
// window.Popper = require('popper.js').default;
11+
// window.$ = window.jQuery = require('jquery');
12+
13+
// require('bootstrap');
14+
// } catch (e) {}
315

416
/**
517
* We'll load the axios HTTP library which allows us to easily issue requests

‎src/tailwindcss-stubs/resources/js/components/ExampleComponent.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="flex flex-col break-words bg-white border border-2 rounded shadow-md">
3+
<div class="font-semibold bg-gray-100 text-gray-700 py-3 px-6 mb-0">
4+
Example Component</div>
5+
<div class="w-full p-6">
6+
<p class="text-gray-700">
7+
I'm an example component.
8+
</p>
9+
</div>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script>
15+
export default {
16+
mounted() {
17+
console.log('Component mounted.')
18+
}
19+
}
20+
</script>

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,36 @@
66
<div class="w-full max-w-sm">
77
<div class="flex flex-col break-words bg-white border border-2 rounded shadow-md">
88

9-
<div class="font-semibold bg-grey-lightest text-grey-darkest py-3 px-6 mb-0 shadow-inner">
9+
<div class="font-semibold bg-gray-200 text-gray-700 py-3 px-6 mb-0">
1010
{{ __('Login') }}
1111
</div>
1212

1313
<form class="w-full p-6" method="POST" action="{{ route('login') }}">
1414
@csrf
1515

1616
<div class="flex flex-wrap mb-6">
17-
<label for="email" class="block text-grey-darker text-sm font-bold mb-2">
17+
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">
1818
{{ __('E-Mail Address') }}:
1919
</label>
2020

21-
<input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('email') ? ' border-red' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
21+
<input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('email') ? ' border-red-500' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
2222

2323
@if ($errors->has('email'))
24-
<p class="text-red text-xs italic mt-4">
24+
<p class="text-red-500 text-xs italic mt-4">
2525
{{ $errors->first('email') }}
2626
</p>
2727
@endif
2828
</div>
2929

3030
<div class="flex flex-wrap mb-6">
31-
<label for="password" class="block text-grey-darker text-sm font-bold mb-2">
31+
<label for="password" class="block text-gray-700 text-sm font-bold mb-2">
3232
{{ __('Password') }}:
3333
</label>
3434

35-
<input id="password" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('password') ? ' border-red' : '' }}" name="password" required>
35+
<input id="password" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('password') ? ' border-red-500' : '' }}" name="password" required>
3636

3737
@if ($errors->has('password'))
38-
<p class="text-red text-xs italic mt-4">
38+
<p class="text-red-500 text-xs italic mt-4">
3939
{{ $errors->first('password') }}
4040
</p>
4141
@endif
@@ -44,26 +44,26 @@
4444
<div class="flex mb-6">
4545
<input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
4646

47-
<label class="text-sm text-grey-dark ml-3" for="remember">
47+
<label class="text-sm text-gray-700 ml-3" for="remember">
4848
{{ __('Remember Me') }}
4949
</label>
5050
</div>
5151

5252
<div class="flex flex-wrap items-center">
53-
<button type="submit" class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
53+
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-gray-100 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
5454
{{ __('Login') }}
5555
</button>
5656

5757
@if (Route::has('password.request'))
58-
<a class="text-sm text-blue hover:text-blue-dark whitespace-no-wrap no-underline ml-auto" href="{{ route('password.request') }}">
58+
<a class="text-sm text-blue-500 hover:text-blue-700 whitespace-no-wrap no-underline ml-auto" href="{{ route('password.request') }}">
5959
{{ __('Forgot Your Password?') }}
6060
</a>
6161
@endif
6262

6363
@if (Route::has('register'))
64-
<p class="w-full text-xs text-center text-grey-dark mt-8 -mb-4">
64+
<p class="w-full text-xs text-center text-gray-700 mt-8 -mb-4">
6565
Don't have an account?
66-
<a class="text-blue hover:text-blue-dark no-underline" href="{{ route('register') }}">
66+
<a class="text-blue-500 hover:text-blue-700 no-underline" href="{{ route('register') }}">
6767
Register
6868
</a>
6969
</p>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,41 @@
66
<div class="w-full max-w-sm">
77

88
@if (session('status'))
9-
<div class="text-sm border border-t-8 rounded text-green-darker border-green-dark bg-green-lightest px-3 py-4 mb-4" role="alert">
9+
<div class="text-sm border border-t-8 rounded text-green-700 border-green-600 bg-green-100 px-3 py-4 mb-4" role="alert">
1010
{{ session('status') }}
1111
</div>
1212
@endif
1313

1414
<div class="flex flex-col break-words bg-white border border-2 rounded shadow-md">
1515

16-
<div class="font-semibold bg-grey-lightest text-grey-darkest py-3 px-6 mb-0 shadow-inner">
16+
<div class="font-semibold bg-gray-200 text-gray-700 py-3 px-6 mb-0">
1717
{{ __('Reset Password') }}
1818
</div>
1919

2020
<form class="w-full p-6" method="POST" action="{{ route('password.email') }}">
2121
@csrf
2222

2323
<div class="flex flex-wrap mb-6">
24-
<label for="email" class="block text-grey-darker text-sm font-bold mb-2">
24+
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">
2525
{{ __('E-Mail Address') }}:
2626
</label>
2727

2828
<input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('email') ? ' border-red' : '' }}" name="email" value="{{ old('email') }}" required>
2929

3030
@if ($errors->has('email'))
31-
<p class="text-red text-xs italic mt-4">
31+
<p class="text-red-100 text-xs italic mt-4">
3232
{{ $errors->first('email') }}
3333
</p>
3434
@endif
3535
</div>
3636

3737
<div class="flex flex-wrap">
38-
<button type="submit" class="bg-blue hover:bg-blue-dark text-white py-2 px-4 rounded focus:outline-none focus:shadow-outline">
38+
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-gray-100 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
3939
{{ __('Send Password Reset Link') }}
4040
</button>
4141

4242
<p class="w-full text-xs text-center text-grey-dark mt-8 -mb-4">
43-
<a class="text-blue hover:text-blue-dark no-underline" href="{{ route('login') }}">
43+
<a class="text-blue-500 hover:text-blue-700 no-underline" href="{{ route('login') }}">
4444
Back to login
4545
</a>
4646
</p>

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="w-full max-w-sm">
77
<div class="flex flex-col break-words bg-white border border-2 rounded shadow-md">
88

9-
<div class="font-semibold bg-grey-lightest text-grey-darkest py-3 px-6 mb-0 shadow-inner">
9+
<div class="font-semibold bg-gray-200 text-gray-700 py-3 px-6 mb-0">
1010
{{ __('Reset Password') }}
1111
</div>
1212

@@ -16,43 +16,43 @@
1616
<input type="hidden" name="token" value="{{ $token }}">
1717

1818
<div class="flex flex-wrap mb-6">
19-
<label for="email" class="block text-grey-darker text-sm font-bold mb-2">
19+
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">
2020
{{ __('E-Mail Address') }}:
2121
</label>
2222

23-
<input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('email') ? ' border-red' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
23+
<input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('email') ? ' border-red' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
2424

2525
@if ($errors->has('email'))
26-
<p class="text-red text-xs italic mt-4">
26+
<p class="text-red-500 text-xs italic mt-4">
2727
{{ $errors->first('email') }}
2828
</p>
2929
@endif
3030
</div>
3131

3232
<div class="flex flex-wrap mb-6">
33-
<label for="password" class="block text-grey-darker text-sm font-bold mb-2">
33+
<label for="password" class="block text-gray-700 text-sm font-bold mb-2">
3434
{{ __('Password') }}:
3535
</label>
3636

37-
<input id="password" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('password') ? ' border-red' : '' }}" name="password" required>
37+
<input id="password" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('password') ? ' border-red' : '' }}" name="password" required>
3838

3939
@if ($errors->has('password'))
40-
<p class="text-red text-xs italic mt-4">
40+
<p class="text-red-500 text-xs italic mt-4">
4141
{{ $errors->first('password') }}
4242
</p>
4343
@endif
4444
</div>
4545

4646
<div class="flex flex-wrap mb-6">
47-
<label for="password-confirm" class="block text-grey-darker text-sm font-bold mb-2">
47+
<label for="password-confirm" class="block text-gray-700 text-sm font-bold mb-2">
4848
{{ __('Confirm Password') }}:
4949
</label>
5050

51-
<input id="password-confirm" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline" name="password_confirmation" required>
51+
<input id="password-confirm" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" name="password_confirmation" required>
5252
</div>
5353

5454
<div class="flex flex-wrap">
55-
<button type="submit" class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
55+
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-gray-100 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
5656
{{ __('Reset Password') }}
5757
</button>
5858
</div>

0 commit comments

Comments
 (0)