Skip to content

Commit 8a19602

Browse files
rverripsrverrips
committed
update README & adjust for tailwindcss v1 & update welcome.blade.php
1 parent b2e7447 commit 8a19602

File tree

6 files changed

+58
-22
lines changed

6 files changed

+58
-22
lines changed

‎README.md

Lines changed: 12 additions & 3 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`)
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 && npm run dev` (this is required twice, due to the way that `laravel-mix-tailwind` installs the Tailwind CSS dependency)
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`)
1221
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)
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

‎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' => '^1.0.0-beta.3',
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/views/welcome.blade.php

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@
1313
<!-- Styles -->
1414
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
1515
</head>
16-
<body class="bg-grey-lightest h-screen antialiased">
16+
<body class="bg-gray-100 h-screen antialiased leading-none">
1717
<div class="flex flex-col">
1818
@if(Route::has('login'))
19-
<div class="absolute pin-t pin-r mt-4 mr-4">
19+
<div class="absolute top-0 right-0 mt-4 mr-4">
2020
@auth
21-
<a href="{{ url('/home') }}" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase">{{ __('Home') }}</a>
21+
<a href="{{ url('/home') }}" class="no-underline hover:underline text-sm font-normal text-teal-800 uppercase">{{ __('Home') }}</a>
2222
@else
23-
<a href="{{ route('login') }}" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase pr-6">{{ __('Login') }}</a>
23+
<a href="{{ route('login') }}" class="no-underline hover:underline text-sm font-normal text-teal-800 uppercase pr-6">{{ __('Login') }}</a>
2424
@if (Route::has('register'))
25-
<a href="{{ route('register') }}" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase">{{ __('Register') }}</a>
25+
<a href="{{ route('register') }}" class="no-underline hover:underline text-sm font-normal text-teal-800 uppercase">{{ __('Register') }}</a>
2626
@endif
2727
@endauth
2828
</div>
@@ -31,27 +31,27 @@
3131
<div class="min-h-screen flex items-center justify-center">
3232
<div class="flex flex-col justify-around h-full">
3333
<div>
34-
<h1 class="text-grey-darker text-center font-thin tracking-wide text-5xl mb-6">
34+
<h1 class="text-gray-800 text-center font-thin tracking-wider text-5xl mb-6">
3535
{{ config('app.name', 'Laravel') }}
3636
</h1>
3737
<ul class="list-reset">
3838
<li class="inline pr-8">
39-
<a href="https://laravel.com/docs" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase" title="Documentation">Documentation</a>
39+
<a href="https://laravel.com/docs" class="no-underline hover:underline text-sm font-normal text-teal-800 uppercase" title="Documentation">Documentation</a>
4040
</li>
4141
<li class="inline pr-8">
42-
<a href="https://laracasts.com" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase" title="Laracasts">Laracasts</a>
42+
<a href="https://laracasts.com" class="no-underline hover:underline text-sm font-normal text-teal-800 uppercase" title="Laracasts">Laracasts</a>
4343
</li>
4444
<li class="inline pr-8">
45-
<a href="https://laravel-news.com" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase" title="News">News</a>
45+
<a href="https://laravel-news.com" class="no-underline hover:underline text-sm font-normal text-teal-800 uppercase" title="News">News</a>
4646
</li>
4747
<li class="inline pr-8">
48-
<a href="https://nova.laravel.com" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase" title="Nova">Nova</a>
48+
<a href="https://nova.laravel.com" class="no-underline hover:underline text-sm font-normal text-teal-800 uppercase" title="Nova">Nova</a>
4949
</li>
5050
<li class="inline pr-8">
51-
<a href="https://forge.laravel.com" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase" title="Forge">Forge</a>
51+
<a href="https://forge.laravel.com" class="no-underline hover:underline text-sm font-normal text-teal-800 uppercase" title="Forge">Forge</a>
5252
</li>
5353
<li class="inline pr-8">
54-
<a href="https://github.com/laravel/laravel" class="no-underline hover:underline text-sm font-normal text-teal-darker uppercase" title="GitHub">GitHub</a>
54+
<a href="https://github.com/laravel/laravel" class="no-underline hover:underline text-sm font-normal text-teal-800 uppercase" title="GitHub">GitHub</a>
5555
</li>
5656
</ul>
5757
</div>

‎src/tailwindcss-stubs/tailwind.js renamed to ‎src/tailwindcss-stubs/tailwind.config.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,14 @@ we've done our very best to explain each section.
1313
View the full documentation at https://tailwindcss.com.
1414
*/
1515

16-
module.exports = require('tailwindcss/defaultConfig')()
16+
module.exports = {
17+
theme: {
18+
// Some useful comment
19+
},
20+
variants: {
21+
// Some useful comment
22+
},
23+
plugins: [
24+
// Some useful comment
25+
]
26+
}

0 commit comments

Comments
 (0)