Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

DataTable CSS Not Loaded using Tailwind


DataTable layout not styling using Tailwind CSS.
I tried Bootsrap CSS, DataTable styling perfectly, but I change to metronic CSS, style is gone.
Fyi, I use Demo 1 with Tailwind.
Here My app.scss code 


@tailwind base;

@tailwind components;

@tailwind utilities;



// Bootstrap

// @import "bootstrap/scss/bootstrap"; 



@import "../metronic/css/styles.css";



/* Keenicons */

@import "../metronic/vendors/keenicons/duotone/style.css";

@import "../metronic/vendors/keenicons/filled/style.css";

@import "../metronic/vendors/keenicons/outline/style.css";

@import "../metronic/vendors/keenicons/solid/style.css";


D
Donny 1 year ago
Laravel Datatables Tailwind 4
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Faizal Author 1 year ago

Hi Donny,

The Bootstrap and Tailwind versions of Metronic are built with entirely different layouts and structures. When upgrading to Metronic 9, you’ll be using a completely new version, and major versions are not directly migratable.

Let me know if you need any further clarification!

Thanks.


D
Donny 1 year ago
Deleted comment
user
Faizal Author 1 year ago

Hi Donny

Have you updated the HTML as well? Bootstrap and Tailwind have different HTML structure class names. Switching between Bootstrap and Tailwind, you have to update the entire layout.

Thanks


D
Donny 1 year ago

Hi Faizal,

When I call endpoint to generate the data, DataTable made default class using Bootstrap on paging and dt-info. How to change HTML class structure from Bootstrap to Tailwind ?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(