New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Laravel Tailwind CSS classes are not applying


I have followed the instructions i documentations and from github repo (https://github.com/keenthemes/metronic-tailwind-html-integration/tree/main/metronic-tailwind-laravel) though the theme is running fine some of the laravel classes are not working like w-3/5 or bg-red-500. Metronic CSS and Clasesses working fine. Also Do we have row callback for the datatable? I am using Laravel 9.2.2


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi Jayrajsinh Rathod

Here are the most likely causes and solutions:

Tailwind CSS uses a "purge" (now called "content") option in tailwind.config.js to remove unused styles. If your Blade or HTML files are not included in the content array, Tailwind will not generate the classes you use in those files.



Open your tailwind.config.js file.
Make sure the content array includes all relevant paths, for example:

content: [
"./resources/views/**/*.blade.php",
"./resources/js/**/*.js",
"./resources/**/*.vue",
// Add any other paths where you use Tailwind classes
],

Save the file and re-run your build process (npm run dev or npm run build).

Sometimes, browser or Laravel view cache can cause old CSS to be served. Try clearing caches:

php artisan view:clear
php artisan cache:clear


Metronic v9 (Tailwind) uses the KTUI Datatable, which is different from the legacy jQuery DataTables. As of now, KTUI Datatable does not have a direct "row callback" like the classic DataTables' rowCallback option.
Alternatives:
You can use the template or render options for columns to customize cell/row output.
For more advanced row manipulation, you may need to use JavaScript after the table is rendered, or extend the KTUI Datatable with custom events.

https://ktui.io/docs/datatable



This is already there. It was working very well when i setup like old laravel tutorial. When i re setup with the new laravel git repo and layout it is not working.



Have you included assets in the public Laravel folder?

/metronic-tailwind-laravel/public/assets


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(