refactor: add missing tw- prefix for css classes

lilnouns · Jan 15, 2023 · d31a567 · d31a567
1 parent 74f6be8
commit d31a567
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 132 deletions.
diff --git a/components/content.tsx b/components/content.tsx
@@ -2,16 +2,16 @@ import { ReactElement, JSXElementConstructor, ReactFragment, ReactPortal } from
 
 export default function Content(props: { children: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null | undefined; }) {
   return (
-    <main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24">
-      <div className="text-center">
-        <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
-          <span className="block xl:inline">Lil Nouns</span>{' '}
-          <span className="block text-neutral-600 xl:inline">Pics</span>
+    <main className="tw-mt-16 tw-mx-auto tw-max-w-7xl tw-px-4 sm:tw-mt-24">
+      <div className="tw-text-center">
+        <h1 className="tw-text-4xl tw-tracking-tight tw-font-extrabold tw-text-gray-900 sm:tw-text-5xl md:tw-text-6xl">
+          <span className="tw-block xl:tw-inline">Lil Nouns</span>{' '}
+          <span className="tw-block tw-text-neutral-600 xl:tw-inline">Pics</span>
         </h1>
-        <p className="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
+        <p className="tw-mt-3 tw-max-w-md tw-mx-auto tw-text-base tw-text-gray-500 sm:tw-text-lg md:tw-mt-5 md:tw-text-xl md:tw-max-w-3xl">
           Lil Nouns Pics, let you select and download a Lil Nouns picture in various sizes and formats.
         </p>
-        <div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
+        <div className="tw-mt-5 tw-max-w-md tw-mx-auto sm:tw-flex sm:tw-justify-center md:tw-mt-8">
         </div>
       </div>
 

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -67,18 +67,18 @@ const navigation: any[] = [
 
 export default function Footer() {
   return (
-    <footer className="bg-white">
-      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
-        <div className="flex justify-center space-x-6 md:order-2">
+    <footer className="tw-bg-white">
+      <div className="tw-max-w-7xl tw-mx-auto tw-py-12 tw-px-4 sm:tw-px-6 md:tw-flex md:tw-items-center md:tw-justify-between lg:tw-px-8">
+        <div className="tw-flex tw-justify-center tw-space-x-6 md:tw-order-2">
           {navigation.map((item) => (
-            <a key={item.name} href={item.href} className="text-gray-400 hover:text-gray-500">
-              <span className="sr-only">{item.name}</span>
-              <item.icon className="h-6 w-6" aria-hidden="true" />
+            <a key={item.name} href={item.href} className="tw-text-gray-400 hover:tw-text-gray-500">
+              <span className="tw-sr-only">{item.name}</span>
+              <item.icon className="tw-h-6 tw-w-6" aria-hidden="true" />
             </a>
           ))}
         </div>
-        <div className="mt-8 md:mt-0 md:order-1">
-          <p className="text-center text-base text-gray-400">&copy; 2022 Lil Nouns. No rights reserved.</p>
+        <div className="tw-mt-8 md:tw-mt-0 md:tw-order-1">
+          <p className="tw-text-center tw-text-base tw-text-gray-400">&copy; 2022 Lil Nouns. No rights reserved.</p>
         </div>
       </div>
     </footer>

diff --git a/components/header.tsx b/components/header.tsx
@@ -11,38 +11,38 @@ const navigation = [
 export default function Header() {
   return (
     <Popover>
-      <div className="max-w-7xl mx-auto px-4 sm:px-6">
-        <nav className="relative flex items-center justify-between sm:h-10 md:justify-center" aria-label="Global">
-          <div className="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">
-            <div className="flex items-center justify-between w-full md:w-auto">
+      <div className="tw-max-w-7xl tw-mx-auto tw-px-4 sm:tw-px-6">
+        <nav className="tw-relative tw-flex tw-items-center tw-justify-between sm:tw-h-10 md:tw-justify-center" aria-label="Global">
+          <div className="tw-flex tw-items-center tw-flex-1 md:tw-absolute md:tw-inset-y-0 md:tw-left-0">
+            <div className="tw-flex tw-items-center tw-justify-between tw-w-full md:tw-w-auto">
               <a href="#">
-                <span className="sr-only">Lil Nouns Pics</span>
+                <span className="tw-sr-only">Lil Nouns Pics</span>
                 {/*<img
-                      className="h-8 w-auto sm:h-10"
+                      className="tw-h-8 tw-w-auto sm:tw-h-10"
                       src="https://tailwindui.com/img/logos/workflow-mark-neutral-600.svg"
                       alt=""
                     />*/}
               </a>
-              <div className="-mr-2 flex items-center md:hidden">
-                <Popover.Button className="bg-gray-50 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-neutral-500">
-                  <span className="sr-only">Open main menu</span>
-                  <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+              <div className="-tw-mr-2 tw-flex tw-items-center md:tw-hidden">
+                <Popover.Button className="tw-bg-gray-50 tw-rounded-md tw-p-2 tw-inline-flex tw-items-center tw-justify-center tw-text-gray-400 hover:tw-text-gray-500 hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-neutral-500">
+                  <span className="tw-sr-only">Open main menu</span>
+                  <Bars3Icon className="tw-h-6 tw-w-6" aria-hidden="true" />
                 </Popover.Button>
               </div>
             </div>
           </div>
-          <div className="hidden md:flex md:space-x-10">
+          <div className="tw-hidden md:tw-flex md:tw-space-x-10">
             {navigation.map((item) => (
-              <a key={item.name} href={item.href} className="font-medium text-gray-500 hover:text-gray-900">
+              <a key={item.name} href={item.href} className="tw-font-medium tw-text-gray-500 hover:tw-text-gray-900">
                 {item.name}
               </a>
             ))}
           </div>
-          {/*<div className="hidden md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0">
-                <span className="inline-flex rounded-md shadow">
+          {/*<div className="tw-hidden md:tw-absolute md:tw-flex md:tw-items-center md:tw-justify-end md:tw-inset-y-0 md:tw-right-0">
+                <span className="tw-inline-flex tw-rounded-md tw-shadow">
                   <a
                     href="#"
-                    className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-neutral-600 bg-white hover:bg-gray-50"
+                    className="tw-inline-flex tw-items-center tw-px-4 tw-py-2 tw-border tw-border-transparent tw-text-base tw-font-medium tw-rounded-md tw-text-neutral-600 tw-bg-white hover:tw-bg-gray-50"
                   >
                     Log in
                   </a>
@@ -62,38 +62,38 @@ export default function Header() {
       >
         <Popover.Panel
           focus
-          className="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
+          className="tw-absolute tw-z-10 tw-top-0 tw-inset-x-0 tw-p-2 tw-transition tw-transform tw-origin-top-right md:tw-hidden"
         >
-          <div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
-            <div className="px-5 pt-4 flex items-center justify-between">
+          <div className="tw-rounded-lg tw-shadow-md tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-overflow-hidden">
+            <div className="tw-px-5 tw-pt-4 tw-flex tw-items-center tw-justify-between">
               {/*<div>
                     <img
-                      className="h-8 w-auto"
+                      className="tw-h-8 tw-w-auto"
                       src="https://tailwindui.com/img/logos/workflow-mark-neutral-600.svg"
                       alt=""
                     />
                   </div>*/}
-              <div className="-mr-2">
-                <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-neutral-500">
-                  <span className="sr-only">Close menu</span>
-                  <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+              <div className="-tw-mr-2">
+                <Popover.Button className="tw-bg-white tw-rounded-md tw-p-2 tw-inline-flex tw-items-center tw-justify-center tw-text-gray-400 hover:tw-text-gray-500 hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-neutral-500">
+                  <span className="tw-sr-only">Close menu</span>
+                  <XMarkIcon className="tw-h-6 tw-w-6" aria-hidden="true" />
                 </Popover.Button>
               </div>
             </div>
-            <div className="px-2 pt-2 pb-3">
+            <div className="tw-px-2 tw-pt-2 tw-pb-3">
               {navigation.map((item) => (
                 <a
                   key={item.name}
                   href={item.href}
-                  className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
+                  className="tw-block tw-px-3 tw-py-2 tw-rounded-md tw-text-base tw-font-medium tw-text-gray-700 hover:tw-text-gray-900 hover:tw-bg-gray-50"
                 >
                   {item.name}
                 </a>
               ))}
             </div>
             {/*<a
                   href="#"
-                  className="block w-full px-5 py-3 text-center font-medium text-neutral-600 bg-gray-50 hover:bg-gray-100"
+                  className="tw-block tw-w-full tw-px-5 tw-py-3 tw-text-center tw-font-medium tw-text-neutral-600 tw-bg-gray-50 hover:tw-bg-gray-100"
                 >
                   Log in
                 </a>*/}