Skip to main content

Laravel in Tailwind CSS? How it work on laravel8


Tailwind v2.1 was just released with a new JIT Engine, Filter and Backdrop-filter Utilities, and more. Let's take a look at some of the new features.

JIT Engine | Laravelnote

A few weeks ago, the Tailwind team released a package they were using to expiriment with a just-in-time compiler for Tailwind. With the release of Tailwind v2.1, the JIT compiler is included in Tailwind core. Just add mode: 'jit' to your Tailwind config file and configure the purge property to scan your markup.

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    // ...
  ],
  // ...
}
Filter and Backdrop-filter Utilities
filter and backdrop-filter utilities have been added. These additions have a composable API similar to the transform utiltiies in Tailwind. Apply the filter (or backdrop-filter) class and then you combine utilities for blur, brightness, contrast, drop-shadow, and other CSS filter properties. Check out the possibilities in the Tailwind docs.

<div class="filter grayscale blur-md contrast-200">
  <!-- ... -->
</div>
Other New Features
In additon to the JIT compiler and filter utilities, new blending mode and isolation utiltities have been added. See more examples of the new features in the official release notes.
Labels:

Popular posts from this blog

Composer Security Update (CVE-2021-29472) for leravel #2021

Composer had a security vulnerability reported (CVE-2021-29472) and a new version has been released to address this. Everyone should run  composer self-update  to get v2.0.13 which includes the fix. According to their  announcment : As a precaution after updating Composer we recommend you audit your composer.lock files to ensure they only contain URLs and none which start with -- , e.g. --config and could be considered command line options. Should you find any such URL values despite our belief that this vulnerability was not exploited in the wild, please contact us immediately by email to security@packagist.org. In general we always recommend you review changes you make to your lock files to ensure no untrusted dependencies or external URLs are introduced to your application. Please note that Packagist.org is only a metadata server and package contents are downloaded from a location chosen by the package maintainers. Private Packagist will store copies of mirrored packag...
Read more

Create Your Next Project's Readme in Laravel8 | laravelnote

  The readme.so editor gives you visual cues, starter section templates and includes many standard readme sections you're likely to use. It also has a nice preview to help guide you along the way. Never forget a section for your readme again! Select sections to add to your readme, edit the contents, and drag to rearrange. See a live-updating rendered preview of your markdown, then download your README.md file! Here's an example of starting an API section, which provides helpful formatting. You might need to specify API params: The editor includes both light and dark editor support, and you can download or copy/paste the raw markdown of your readme into version control once you're done. You can learn more about this project and start using it on  readme.so . Also, be sure to check out  readme.so on Product Hunt  and upvote it if you find it useful!
Read more

Check if a Laravel request is from the CLI on Laravelnote

  There might be times where you need to know if a request to your Laravel app is coming from the CLI or from the web. As an example, I wanted to turn on the   query log   to dump out all the SQL queries. In AppServiceProvider I added a simple config check to turn on the the log: if (config('settings.profile')) { \DB::connection()->enableQueryLog(); } With this in place, it would run for web requests, as I wanted, but the side effect is it would also be turned on in our queue jobs and other CLI tasks. Laravel runningInConsole | Laravelnote Laravel provides a simple helper called  runningInConsole  that you can use to help determine what environment you are in. app()->runningInConsole() With this I could just an inverse check to make sure my code only runs when it's a web request: if (config('settings.profile') && ! app()->runningInConsole()) { \DB::connection()->enableQueryLog(); } If you ever come to a situation where you need to know w...
Read more