cnzaicom/tailwindcss

Laravel frontend preset for Tailwind CSS

dev-main 2021-05-28 11:04 UTC

Requires

• laravel/framework: ^8.0
• laravel/ui: ^3.0

MIT

• Vampire

• laravel
• preset
• tailwindcss

README

1. Fresh install Laravel >= 7.0 and cd to your app.
2. Install this preset via composer require cnzaicom/tailwindcss --dev. Laravel will automatically discover this package. No need to register the service provider.
3. Edit tailwindcss.config.js to add plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('tailwindcss-children'), ]
4. Edit webpack.mix.js like this

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
        /*自动增加 CSS 前缀词*/
        require("autoprefixer"),
        /*在 CSS 用嵌套的写法*/
        require('postcss-nested'),
        /*在 CSS 里可以 import 其他 CSS*/
        require('postcss-import'),
    ]);

a. For Presets without Authentication

1. Use php artisan ui tailwindcss for the basic Tailwind CSS preset
2. npm install && npm run dev
3. php artisan serve (or equivalent) to run server and test preset.

b. For Presets with Authentication

1. Use php artisan ui 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)
2. npm install && npm run dev
3. Configure your favorite database (mysql, sqlite etc.)
4. php artisan migrate to create basic user tables.
5. php artisan serve (or equivalent) to run server and test preset.

Screenshots