Tailwind CSS: ??? ???? ??? ?? ??? ??

React?? ??? ??? ??? ? ? Tailwind CSS ??? ??? ???? ???? ?? ??? ?????. ???? ???? ???? ??. ??? ??? ????? ??? ? ??? ???????.

??

?? ???? ??? ???? ???? Tailwind CSS?? ???? ???? ??? ? ??? ?????. ?? ??, ??? ??? ??? ???? ???? ?? ? ????.

const closeNav = () => {
  setClick(!click);
};

<div className={`absolute inset-0 ${click ? "translate-x-0" : "-translate-x-full" } transform z-400 h-screen w-1/4 bg-blue-300`}></div>

???

?? ??? ??? ??? ???? ???? ??? ??? ??? ????. ??:

<div className={click ? "absolute inset-0 translate-x-0 transform z-400 h-screen w-1/4 bg-blue-300" : "absolute inset-0 -translate-x-full transform z-400 h-screen w-1/4 bg-blue-300"}></div>

?? ??? ?? ???:

<div className={"absolute inset-0 " + (click ? "translate-x-0" : "-translate-x-full") + " transform z-400 h-screen w-1/4 bg-blue-300"}></div>

?? ??

??? ??? ???? ??? ??? ???? ???. Tailwind? ???? ??? ? ????. ?? ?? ??? ??? ????? classNames, clsx ?? tailwind ?? ???(twin.macro, Twind, xwind ?)? ?? ??? ?? ??? ????? ?????.

?? ??

??? ???? clsx? ?? ?? ?????? Twin.macro, Twind? ?? Tailwind ?? ???? ???? ??? ???? ??? ?? ????. ? xwind.

?? ??

??? ??? ?? ???? ?????.

• [React.js ??? ?? ??? ??](https://stackoverflow.com/questions/39584486/conditionally-applying-class-names-in-react-js)
• [?? ??? ??? ???? ???? ???? ??? ??????](https ://www.sitepoint.com/dynamically-add-classes-javascript/)
• [??? ???? ???? ??? ?? React](https://stackoverflow.com/questions/44916340/corright-way-to-handle-conditional-styling-in-react)
• [JSX? ??? ??](https://reactjs. org/docs/jsx-in-length.html#embedding-expressions-in-jsx)
• [??? ??? - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [???? ??? - ?? ??? HTML ?? - Tailwind CSS](https: //tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html)

? ??? ??? ???? ???? React?? Tailwind CSS ???? ???? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!