New: Learn Statamic on Laracasts!

We've retired the forum in favor of GitHub Discussions.

New conversations can be started on GitHub. Existing conversations will remain for a while longer.

Head over to GitHub →

Issue Installing TailwindCSS Plugin: TailwindUI

Lloyd Montgomery August 29, 2020 by Lloyd Montgomery

I am building my Statamic site from the cool-writings template.

I am trying to use TailwindUI components by following their installation instructions: https://tailwindui.com/documentation.

Attempt 1:

  • Follow the instructions to NPM install TailwindUI and then add @tailwindcss/ui to the Tailwind plugin list.
  • TailwindUI components do not work. The installation and linking appears to not be working, even though I follow the instructions exactly.

Attempt 2:

  • Use the TailwindUI CDN
  • TailwindUI components load, but there is a strange conflict where items that rely on "hidden" TailwindCSS styling do not work (they are always hidden, instead of visible when not mobile)

Attempt 3:

  • Use the TailwindUI CDN
  • Comment out the following: <link rel="stylesheet" href="{{ mix src='css/tailwind.css' }}"> Result: TailwindUI components load, but the Markdown styling (and I imagine many other things) stop working.

Perhaps this issue should be reported elsewhere, such as the TailwindUI Github. However, given the nature of Statamic using TailwindCSS, I am confused why installing a plugin of TailwindCSS and adding it to the tailwind.config.jss file does not work.

Any thoughts on my struggle?

Lloyd

Answered by Erin Dalzell!
>>>>>>> Answered <<<<<<<
4 Replies
3 Followers