Comments (15)
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.
Related Issues (20)
- FeatReq: update to Tailwind v3 HOT 1
- Error when adding new page HOT 2
- Gatsby Starter Page Demo Link and Preview Image Not Working HOT 2
- Enable cssnano only for production HOT 1
- Add a netlify.toml file
- Add instructions for Tailwind UI HOT 1
- Unable to start new project - Error: Cannot find module 'core-js/modules/es6.object.assign' HOT 3
- Lof of Warnings. How to fix this? HOT 6
- Recompile tailwind without restarting develop app HOT 2
- How is this purging unused css? HOT 1
- CSS conflict issues HOT 2
- CSS broken for page layout wrapper on production build HOT 1
- how to update tailwind css ? HOT 1
- Upgrade to Tailwind v2
- Getting Flash of Unstyled Content (FOUC) HOT 1
- Test_001_react_tailwind
- Test_001_react_tailwind
- How to add global css? HOT 1
- FeatReq: update to gatsby v3 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-starter-tailwind.