A Tailwind CSS frontend preset for the Laravel Framework

  • By Laravel Frontend Presets
  • Last update: Dec 29, 2022
  • Comments: 13

Laravel 7.0+ Frontend preset for Tailwind CSS

A Laravel front-end scaffolding preset for Tailwind CSS - a Utility-First CSS Framework for Rapid UI Development.

Usage

  1. Fresh install Laravel >= 7.0 and cd to your app.
  2. Install this preset via composer require laravel-frontend-presets/tailwindcss --dev. Laravel will automatically discover this package. No need to register the service provider.

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.

Config

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.

Add a new i18n string in the resources/lang/XX/pagination.php file for each language that your app uses:

'previous' => '« Previous',
'next' => 'Next »',
'goto_page' => 'Goto page #:page', // Add this line

This should help with accessibility

<li>
    <a href="URL?page=2" class="..."
       aria-label="Goto page #2"
    >
        2
    </a>
</li>

Pagination

Laravel now supports Tailwind CSS pagination directly. If you would like to use these views in your app, you can refer to docs.

Screenshots

Welcome

Register

Login

Reset Password

Dashboard

Verify

Github

https://github.com/laravel-frontend-presets/tailwindcss

Comments(13)

  • 1

    Correctly call the tailwindcss preset if the auth flag is not passed

    Due to the removal of tailwindcss-auth macro the tailwindcss macro will always run TailwindCssPreset::installAuth(). This is in large part because how macro's work and the UiCommand::macro('tailwindcss') getting overwritten by AuthCommand::macro('tailwindcss').

    This commit assumes that just having one macro of tailwindcss is the acceptable use moving forward. With that said, this commit check the command option auth flag and if it's true will correctly install all the auth presets.

    This commit also removes the call to the install() method on the TailwindCssPreset::installAuth method as this should always be called on the macro.

    image

  • 2

    Allow installation on Laravel8

    I just wanted to show your package to a colleague on a fresh Laravel install and noticed that it isn't ^8.0 ready. If there isn't a blocking change (up to you to judge), I guess it's only a few minutes of work to update your composer.json. I'll show it on a Laravel7 install, so not urgent/important for me, but I just wanted to inform you.

    laravel-frontend-presets/tailwindcss 4.2.0 requires laravel/framework ^7.0 -> satisfiable by laravel/framework[7.x-dev]
  • 3

    [WIP] Add PurgeCSS to preset

    This modifies the TailwindCSS preset to include PurgeCSS on production builds. Reduces my 110kb Tailwind CSS down to 5kb 😮

    @michaeldyrynda - this is a WIP. It is working (for me) - but I just wanted to put it out there and let some other people try it before you consider merging it in.

    I've tested on a Windows 10 Homestead VM - so would be nice for people with Mac's etc to test.

  • 4

    laravel-mix ^2.1 causes error on npm run dev

    After installing this package following the instructions in readme, the file package.json has updated "laravel-mix": "^2.0" to "laravel-mix": "^2.1", Doing this, the npm run dev fails with the following error description:

    node_modules/laravel-mix/src/Dependencies.js:41 process.exit(); ^ TypeError: process.exit is not a function

    After reseting it to 2.0, it works again.

  • 5

    Feature request: Dropdown menus

    Hi guys please direct me if this isn't a good place to make a feature request.

    My opinion is that it would be great to build a dropdown menu for the Tailwind preset. When I first used this preset it wasn't obvious from the screenshots that the menu doesn't drop down like the official Laravel presets. I googled it and found that Adam has created a few videos on how to achieve a dropdown. Honestly having worked with Bootstrap navbar dropdowns before I was quite overwhelmed with the technicalities. It appears highly a bit complicated, and then when you go mobile even more so.

    I see even Adam's preset doesn't have the dropdown menu. My opinion is that perhaps if the dropdowns make it to this preset more people will start embracing Tailwind and Laravel.

  • 6

    Usage with Laravel 6

    Hi

    What are the plans to make this usable with laravel 6? Can we just update the composer version reqs to laravel 6?

    laravel/ui does not yet has a tailwind preset.

  • 7

    Deleted Bootstrap?

    Setting aside the fact that one should probably not use both Bootstrap and Tailwind at the same time, I have to ask if this preset installer is deleting Bootstrap.

    After installing this preset and seeing that it completely destroys my Sass structure, I tried reverting to a commit just before installing this. Doing so, however, now shows this in my main app.scss file:

    image

    I don't know how to fix this. I don't know what happened at all. Is this preset just assuming that users of it wouldn't also want to use Bootstrap and just deletes it or something? How can I get it back so that this code works again?

  • 8

    TypeError: mix.js(...).postCss is not a function

    I am getting the following error when running npm run dev :

    TypeError: mix.js(...).postCss is not a function at Object. (/home/amin/testTailwind/webpack.mix.js:17:5) at Module._compile (module.js:569:30) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at Mix.initialize (/home/amin/testTailwind/node_modules/laravel-mix/src/Mix.js:46:13) at Object. (/home/amin/testTailwind/node_modules/laravel-mix/setup/webpack.config.js:18:5) at Module._compile (module.js:569:30) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in: npm ERR! /home/amin/.npm/_logs/2017-12-01T18_05_52_174Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ dev: npm run development npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in: npm ERR! /home/amin/.npm/_logs/2017-12-01T18_05_52_187Z-debug.log

  • 9

    Tailwind CSS @apply doesn't work when using preset default

    See this issue in the Tailwind repo: https://github.com/tailwindcss/tailwindcss/issues/53

    The advice in that issue from @adamwathan is sound and corrects the issue. He offers two solutions, they both seem to work but I'm not sure which one would be best for the preset default.

  • 10

    Composer installation fails with latest Laravel 7 version

    Installed latest Laravel 7 with the following command:

    composer create-project --prefer-dist laravel/laravel:^7.0 blog

    Changed into the blog directory and ran:

    composer require laravel-frontend-presets/tailwindcss --dev

    Installation failed per the attached screenshot. Composer lock file shows Laravel at 7.28.4

    Screen Shot 2020-10-14 at 3 36 32 pm

  • 11

    Unable to open Input file

    this is the code i get when trying to open input file

    $ php artisan ui tailwindcss --auth Could not open input file: artisan

    How do you fix this issue?

  • 12

    Compatibility issue with Laravel 9+

    I used to work with this component with Laravel 8 and below. It worked fine with no issue. But now its not compatible with the latest Laravel. Do you have anew way to install his in Laravel 9?

  • 13

    Laravel 9.x Compatibility

    This is an automated pull request from Shift to update your package code and dependencies to be compatible with Laravel 9.x.

    Before merging, you need to:

    • Checkout the l9-compatibility branch
    • Review all comments for additional changes
    • Thoroughly test your package

    If you do find an issue, please report it by commenting on this PR to help improve future automation.

Popular Tag

Related