Using TailwindUI with Alpinejs OR React component for this starter about gatsby-starter-tailwind HOT 15 CLOSED

Will add some notes for people who may stumble accross this via google now that Tailwind has released a small react library:

To add transitions to your react components, first install @tailwindui/react

npm install @tailwindui/react

Import into your page/component import { Transition } from "@tailwindui/react";

Wrap your dropdown/modal/etc in the below component, changing the parameters (enter/enterFrom) etc as per the tailwindUI guidelines that should be included with the HTML.

<Transition
          show={isOpen}
          enter="duration-150 ease-out"
          enterFrom="opacity-0 scale-95"
          enterTo="opacity-100 scale-100"
          leave="duration-100 ease-in"
          leaveFrom="opacity-100 scale-100"
          leaveTo="opacity-0 scale-95"
        > 

{.. content goes here! ..}

</Transition>

You will also want to add a prop for the state (i used the show='isOpen') and then make use of the react hook 'useState'. This will be triggered on clicking the menu open/closed buttons or whatever your usage requires

const [isOpen, setIsOpen] = useState(false);

<button
     type="button"
     className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
      id="main-menu"
      aria-label="Main menu"
      aria-haspopup="true"
      onClick={() => setIsOpen(!isOpen)}
     >

Hope this helps!

from gatsby-starter-tailwind.

What kind of Tailwind UI starter did you have in mind? The trouble is... I can't just take their UI components and make it into a Gatsby starter. That's prohibited in their license:

from gatsby-starter-tailwind.

Sure, I know TWUI is not OSS and I bought it. Specifically, we cannot include the html templates in OSS projects.

I'm asking as I tried to configure it along your template and I had errors :-/ So if you are using the TWUI cool I would be curious to see how it's configure within this template.

So at the moment, I stick to a vanilla html/twui setup.

from gatsby-starter-tailwind.

@pascalandy Gotcha! Just wanted to make sure we’re on the same page. Is this helpful at all? #452 (comment)

I know you said you’re newer to React, so one thing to keep in mind is that you can’t use class on HTML elements. You’ll need to do a find-and-replace and change those to className. This tool might be helpful: https://magic.reactjs.net/htmltojsx.htm. The Tailwind UI components without Alpine.js should be easy to translate to React, but the ones with JS integrated are a bit trickier. I’ve had some trouble translating from Alpine.js to React myself. 😭

from gatsby-starter-tailwind.

Ok thanks for your advices :) I guess I need to learn a bit more before going all in.

from gatsby-starter-tailwind.

I'm at this point now:

I’ve had some trouble translating from Alpine.js to React myself.

TW vanilla + Alpinejs works perfectly. So I'll continue to learn Gatsby in parallel. Hopefully I'll find the perfect setup soon.

from gatsby-starter-tailwind.

I feel this might help https://codewithhugo.com/alpine-js-react/ but I'm not sure how to get the final setup.

from gatsby-starter-tailwind.

Interesting comments here. We paid for TailWindUI also, and tried to implement it with Gatsby. It's a gigantic pain to translate the files for react. Also, the components classes are so complex, it's been difficult to spot errors when things don't look the way they should in Gatsby. We had our site all nicely designed with TailWindUI, looked great locally, then pushed to Netlify and it looked like a disaster. Cannot figure out why. We are tempted to just go back to this simpler template and rework on the tailwindui components from scratch.

from gatsby-starter-tailwind.

Thanks for jumping in @osseonews. I've the exact same workflow in mind.

Plain HTML

Are you using something like this? It's react with plain HTML. Does this give you issues?

import React from 'react';
function App() {
  return (

    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <img className="w-full" src={require('./profile.jpg')} alt="Display" />
      <div className="px-6 py-4">
        <div className="font-bold text-purple-500 text-xl mb-2">
          Blessing Krofegha
        </div>
        <p className="text-gray-700 text-base">
          When i’m not coding i switch to netflix with biscuits and cold tea as my companion. <span></span>😜
        </p>
      </div>
      <div className="px-6 py-4">
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#Software Engineer</span>
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#Writter</span>
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mt-2 ml-20">#Public Speaker</span>
      </div>
    </div>
  );
}
export default App;

Alpinejs

I guess you have no luck with alpinejs?

from gatsby-starter-tailwind.

Getting closer.

Just discovered https://github.com/kiliman/tailwindui-crawler. You need to have an account on TailwindUI.

This script will crawl the tailwindui.com website and download all the component HTML to the ./output folder.

It's very clean. You can export the HTML with Alpinejs. Works good for a vanilla setup :)

You also have the option to export React component! I tried them in Gatsby but it shows non-sense. Again I'm a Gatsby newbie but maybe you guys are trying you will get something.

from gatsby-starter-tailwind.

thanks for these updates. Never looked at alpine.js and don't have the patience to learn another framework. One thing I did learn recently, is that if you use Tailwind with Gatsby, you got to be sure to not use Typography.js, which injects tons of styles that conflict. Alot of gatsby themes install typography by default. This was a problem for us on a theme we were using. You can learn how to uninstall it here: https://medium.com/@sgpropguide/starting-over-a-gatsby-project-on-a-clean-slate-43df28e17cb5 . The gatsby-starter-tailwind theme doesn't use typography, btw.

from gatsby-starter-tailwind.

Alpine generates styles that conflicts as well. Like these two characters @ :

<div x-data="{ open: false }" class="relative bg-white overflow-hidden">

or

<button @click="open = false" type="button" class="inline-flex items-center justify-center p-2 rounded-md">

from gatsby-starter-tailwind.

I think this will be a lot easier In the coming months. The Tailwind UI team is working on implementing their components in Vue and React. See their latest job posting here: https://jobs.tailwindui.com/full-stack-developer.

...as well as contributing directly at the product strategy and creative level to new projects, such as: Designing and developing official React and Vue libraries using Tailwind UI components

from gatsby-starter-tailwind.

Correct. So I think I won't use AlpineJS and go for very basic homepage at the moment.

from gatsby-starter-tailwind.

@taylorbryant just send you an email :-p

from gatsby-starter-tailwind.