├── src
├── tailwindcss-stubs
│ ├── resources
│ │ ├── js
│ │ │ ├── site.js
│ │ │ └── bootstrap.js
│ │ ├── css
│ │ │ └── tailwind.css
│ │ └── views
│ │ │ ├── home.antlers.html
│ │ │ ├── layout.antlers.html
│ │ │ └── nav.antlers.html
│ ├── tailwind.config.js
│ └── webpack.mix.js
├── TailwindCssPresetServiceProvider.php
└── TailwindCssPreset.php
├── composer.json
├── README.md
└── LICENSE.md
/src/tailwindcss-stubs/resources/js/site.js:
--------------------------------------------------------------------------------
1 | // Write some JS here, if you need JS.
2 |
--------------------------------------------------------------------------------
/src/tailwindcss-stubs/resources/js/bootstrap.js:
--------------------------------------------------------------------------------
1 | // Bootstrap your JS here, if you need JS.
2 |
--------------------------------------------------------------------------------
/src/tailwindcss-stubs/tailwind.config.js:
--------------------------------------------------------------------------------
1 | // TailwindCSS
2 |
3 | module.exports = {
4 | theme: {},
5 | variants: {},
6 | plugins: [],
7 | }
8 |
--------------------------------------------------------------------------------
/src/tailwindcss-stubs/resources/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 |
3 | /* @import "yourstuff"; */
4 |
5 | @import "tailwindcss/components";
6 |
7 | @import "tailwindcss/utilities";
8 |
--------------------------------------------------------------------------------
/src/tailwindcss-stubs/resources/views/home.antlers.html:
--------------------------------------------------------------------------------
1 | {{ title }}
2 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde quo quibusdam consequuntur nobis, nemo ipsam molestiae
3 | maiores neque harum, hic, consectetur veritatis quasi magni. Delectus eum aspernatur ipsum eos vitae.
4 |
--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "statamic/preset-tailwindcss",
3 | "description": "Statamic frontend preset for Tailwind CSS",
4 | "keywords": ["statamic", "preset", "tailwindcss"],
5 | "license": "MIT",
6 | "require": {
7 | "laravel/framework": "6.*"
8 | },
9 | "autoload": {
10 | "psr-4": {
11 | "StatamicFrontendPresets\\TailwindCssPreset\\": "src/"
12 | }
13 | },
14 | "extra": {
15 | "laravel": {
16 | "providers": [
17 | "StatamicFrontendPresets\\TailwindCssPreset\\TailwindCssPresetServiceProvider"
18 | ]
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/tailwindcss-stubs/resources/views/layout.antlers.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ site_name ?? "Statamic 3" }}
9 |
14 | {{ template_content }}
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/tailwindcss-stubs/webpack.mix.js:
--------------------------------------------------------------------------------
1 | const mix = require('laravel-mix');
2 | require('laravel-mix-purgecss');
3 |
4 | /*
5 | |--------------------------------------------------------------------------
6 | | Mix Asset Management
7 | |--------------------------------------------------------------------------
8 | |
9 | | Mix provides a clean, fluent API for defining some Webpack build steps
10 | | for your Laravel application. By default, we are compiling the Sass
11 | | file for the application as well as bundling up all the JS files.
12 | |
13 | */
14 |
15 | mix.js('resources/js/site.js', 'public/js')
16 | mix.postCss('resources/css/tailwind.css', 'public/css', [
17 | require('postcss-import'),
18 | require('tailwindcss'),
19 | require('postcss-preset-env')({stage: 0}),
20 | ])
21 |
22 | if (mix.inProduction()) {
23 | mix.version();
24 | // mix.purgeCss();
25 | }
26 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Statamic Frontend Preset for Tailwind CSS
2 |
3 | A Statamic front-end scaffolding preset for [Tailwind CSS](https://tailwindcss.com).
4 |
5 | 
6 | 
7 |
8 |
9 |
10 | ## Usage
11 |
12 | In a fresh install of Statamic 3, run the following commands.
13 |
14 |
15 | 1. Install this preset package
16 |
17 | ```
18 | composer require statamic/preset-tailwindcss
19 | ```
20 |
21 | 2. Run the preset artisan command
22 |
23 | ```
24 | # For a clean install
25 | php artisan preset tailwindcss-clean
26 |
27 | # To add to your current resources
28 | php artisan preset tailwindcss
29 | ```
30 |
31 | 3. Install NPM dependencies and run webpack
32 |
33 | ```
34 | npm install && npm run dev
35 | ```
36 |
--------------------------------------------------------------------------------
/src/TailwindCssPresetServiceProvider.php:
--------------------------------------------------------------------------------
1 | info('Tailwind CSS scaffolding installed successfully.');
16 | $command->info('Please run "npm install && npm run dev" to compile your fresh scaffolding.');
17 | });
18 |
19 | PresetCommand::macro('tailwindcss-clean', function ($command) {
20 | TailwindCssPreset::installClean();
21 |
22 | $command->info('Fresh and clean Tailwind CSS scaffolding installed successfully.');
23 | $command->info('Please run "npm install && npm run dev" to compile your fresh scaffolding.');
24 | });
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Statamic
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/tailwindcss-stubs/resources/views/nav.antlers.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
8 |
9 | Menu
10 |
12 |
13 |
29 |
--------------------------------------------------------------------------------
/src/TailwindCssPreset.php:
--------------------------------------------------------------------------------
1 | "^9.6.1",
34 | "cross-env" => "^5.1",
35 | "postcss-import" => "^12.0.1",
36 | "postcss-nested" => "^4.1.2",
37 | "postcss-preset-env" => "^6.7.0",
38 | 'laravel-mix' => '^4.0',
39 | 'laravel-mix-purgecss' => '^4.0.0',
40 | "tailwindcss" => "^1.1.2"
41 | ];
42 | }
43 |
44 | return array_merge([
45 | 'laravel-mix' => '^4.0',
46 | 'laravel-mix-purgecss' => '^4.0.0',
47 | 'laravel-mix-tailwind' => '^0.1.0',
48 | 'vue-template-compiler' => '^2.6.10'
49 | ], Arr::except($packages, [
50 | 'axios',
51 | 'bootstrap',
52 | 'bootstrap-sass',
53 | 'laravel-mix',
54 | 'jquery',
55 | 'popper',
56 | 'vue'
57 | ]));
58 | }
59 |
60 | protected static function updateStyles()
61 | {
62 | tap(new Filesystem, function ($filesystem) {
63 | $filesystem->deleteDirectory(resource_path('sass'));
64 | $filesystem->delete(public_path('js/app.js'));
65 | $filesystem->delete(public_path('css/app.css'));
66 |
67 | if (! $filesystem->isDirectory($directory = resource_path('css'))) {
68 | $filesystem->makeDirectory($directory, 0755, true);
69 | }
70 | });
71 |
72 | copy(__DIR__.'/tailwindcss-stubs/resources/css/tailwind.css', resource_path('css/tailwind.css'));
73 | }
74 |
75 | protected static function updateBootstrapping()
76 | {
77 | copy(__DIR__.'/tailwindcss-stubs/tailwind.config.js', base_path('tailwind.config.js'));
78 |
79 | copy(__DIR__.'/tailwindcss-stubs/webpack.mix.js', base_path('webpack.mix.js'));
80 |
81 | copy(__DIR__.'/tailwindcss-stubs/resources/js/bootstrap.js', resource_path('js/bootstrap.js'));
82 | }
83 |
84 | protected static function updateWelcomePage()
85 | {
86 | tap(new Filesystem, function ($filesystem) {
87 | $filesystem->delete(resource_path('views/layout.antlers.html'));
88 | $filesystem->delete(resource_path('views/home.antlers.html'));
89 | });
90 |
91 | copy(__DIR__.'/tailwindcss-stubs/resources/views/layout.antlers.html', resource_path('views/layout.antlers.html'));
92 | copy(__DIR__.'/tailwindcss-stubs/resources/views/home.antlers.html', resource_path('views/home.antlers.html'));
93 | copy(__DIR__.'/tailwindcss-stubs/resources/views/nav.antlers.html', resource_path('views/nav.antlers.html'));
94 | }
95 | }
96 |
--------------------------------------------------------------------------------