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

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

Laravel8 in Serializes Models trait | laravelnote

This article was originally posted, with additional formatting, on my personal blog at laravel serializes model Background  When dispatching an object onto the queue, behind the scenes Laravel is recursively serializing the object and all of its properties into a string representation that is then written to the queue. There it awaits a queue worker to retrieve it from the queue and unserialize it back into a PHP object (Phew!). Problem When complicated objects are serialized, their string representations can be atrociously long, taking up unnecessary resources both on the queue and application servers. Solution Because of this, Laravel offers a trait called SerializesModels which, when added to an object, finds any properties of type Model or Eloquent\Collection during serialization and replaces them with a plain-old-PHP-object (POPO) known as a ModelIdentifier. These identifier objects represent the original properties Model type and ID, or IDs in the case of an Eloquent\Collecti...
Read more

How To use jsconfig.js when using VSCode in laravel8

if you  want to improve your developer experience when working in JavasScript with VSCode, you need to start adding a  jsconfig.json  file to all your projects. What is jsconfig.json? | Laravelnote VSCode uses a  jsconfig.json  file to aid your  JavaScript language service  and significantly improve your development experience. Let's say you've just installed a new Laravel PHP application and are using the  Laravel Breeze Inertia   starter kit . When you open the  webpack.config.js  file, you'll see the following. const path = require('path'); module.exports = { resolve: { alias: { '@': path.resolve('resources/js'), }, }, }; The above helps instruct Webpack on how modules are  resolved  in your application. It allows you to use  @  as a shortcut, so you don't have to back step to create relative paths to other components. Let’s say you have the following a component in  ...
Read more