Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Metronic 9 Tailwind in Laravel


I followed the documentation to bring the Tailwind theme into Laravel and am receiving the following error.


[plugin:vite:css] [postcss] Cannot read properties of undefined (reading "light")
/Users/mweber/Developer/tempr-core/resources/css/app.scss
at getDefaultGrayColors (/Users/mweber/Developer/tempr-core/resources/theme/core/plugins/components/theme.js:32:41)
at /Users/mweber/Developer/tempr-core/resources/theme/core/plugins/components/theme.js:119:7
at registerPlugins (/Users/mweber/Developer/tempr-core/node_modules/tailwindcss/lib/lib/setupContextUtils.js:815:61)
at createContext (/Users/mweber/Developer/tempr-core/node_modules/tailwindcss/lib/lib/setupContextUtils.js:1221:5)
at getContext (/Users/mweber/Developer/tempr-core/node_modules/tailwindcss/lib/lib/setupContextUtils.js:1278:19)
at /Users/mweber/Developer/tempr-core/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:118:81
at /Users/mweber/Developer/tempr-core/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
at plugins (/Users/mweber/Developer/tempr-core/node_modules/tailwindcss/lib/plugin.js:38:69)
at LazyResult.runOnRoot (/Users/mweber/Developer/tempr-core/node_modules/postcss/lib/lazy-result.js:329:16)
at LazyResult.runAsync (/Users/mweber/Developer/tempr-core/node_modules/postcss/lib/lazy-result.js:25


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)


We did mention "Copy the tailwind.config.js file" in the documentation at step 5. We will work on improving it to make the process as simple as possible. Thank you for your feedback!



Hi Matthew Weber

Have you copied the tailwind.config.js file into your root Laravel folder?



I had not done that. I had copied just the sections as outlined in the documentation. I no longer am receiving a Vite error, but the page is not rendering correctly. I will work through it to see if I'm missing anything before raising another question.

Thank you!


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  :(