migrate tailwind classnames to nextra@3

Author: on47sky

components/Card/index.tsx

@@ -17,7 +17,7 @@ export function Card(props: Props) {
 
   return (
     <Link
-      className="block p-5 border dark:nx-border-neutral-700 cursor-pointer !no-underline rounded-xl shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
+      className="block p-5 border dark:_border-neutral-700 cursor-pointer !no-underline rounded-xl shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
       href={href}
       to={to}
       toTab={toTab}

components/ContractsAddresses/index.tsx

@@ -100,7 +100,7 @@ type ContractsTableProps = {
 const ContractsTable: React.FC<ContractsTableProps> = ({ addresses }) => {
 
   return (
-    <table className="nx-block nx-overflow-x-scroll nextra-scrollbar nx-mt-6 nx-p-0 first:nx-mt-0">
+    <table className="_block _overflow-x-scroll nextra-scrollbar _mt-6 _p-0 first:_mt-0">
       <tbody>
       {
         rows.map((contractName, index) => {
@@ -112,10 +112,10 @@ const ContractsTable: React.FC<ContractsTableProps> = ({ addresses }) => {
           const address = addresses[contractName]
 
           return (
-            <tr key={index} className="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20">
+            <tr key={index} className="_m-0 _border-t _border-gray-300 _p-0 dark:_border-gray-600 even:_bg-gray-100 even:dark:_bg-gray-600/20">
               <td
                 key={index}
-                className="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600"
+                className="_m-0 _border _border-gray-300 _px-4 _py-2 dark:_border-gray-600"
               >
                 {
                   link ? (
@@ -133,12 +133,12 @@ const ContractsTable: React.FC<ContractsTableProps> = ({ addresses }) => {
               </td>
               <td
                 key={index}
-                className="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600"
+                className="_m-0 _border _border-gray-300 _px-4 _py-2 dark:_border-gray-600"
               >
                 {
                   Boolean(address) ? (
                     <code
-                      className="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10"
+                      className="_border-black _border-opacity-[0.04] _bg-opacity-[0.03] _bg-black _break-words _rounded-md _border _py-0.5 _px-[.25em] _text-[.9em] dark:_border-white/10 dark:_bg-white/10"
                       dir="ltr"
                     >
                       {address}

components/Footer/index.tsx

@@ -11,7 +11,7 @@ function NavItem({ children, to, toTab }: NavItemProps) {
 
   return (
     <Link
-      className="nx-text-sm nx-relative -nx-ml-2 nx-whitespace-nowrap nx-p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+      className="_text-sm _relative -_ml-2 _whitespace-nowrap _p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
       to={to}
       toTab={toTab}
       customColor
@@ -24,8 +24,8 @@ function NavItem({ children, to, toTab }: NavItemProps) {
 export default function Footer() {
 
   return (
-    <footer className="nx-bg-gray-100 nx-pb-[env(safe-area-inset-bottom)] dark:nx-bg-neutral-900 print:nx-bg-transparent">
-      <div className="nx-mx-auto nx-flex nx-max-w-[90rem] nx-justify-center py-6 nx-text-gray-600 dark:nx-text-gray-400 md:nx-justify-start nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]">
+    <footer className="_bg-gray-100 _pb-[env(safe-area-inset-bottom)] dark:_bg-neutral-900 print:_bg-transparent">
+      <div className="_mx-auto _flex _max-w-[90rem] _justify-center py-6 _text-gray-600 dark:_text-gray-400 md:_justify-start _pl-[max(env(safe-area-inset-left),1.5rem)] _pr-[max(env(safe-area-inset-right),1.5rem)]">
         <div className="flex flex-col-reverse md:flex-row items-center justify-between md:justify-start w-full">
           <div className="mt-2 md:mt-0 md:mr-14 text-sm">{new Date().getFullYear()} © <a href="https://azuro.org" target="_blank">Azuro</a></div>
           <div className="flex space-x-2">

components/Link/index.tsx

@@ -16,7 +16,7 @@ export function Link(props: Props) {
   const { children, className, href, to, toTab, customColor } = props
 
   const nodeProps: any = {
-    className: cx('nx-underline nx-decoration-from-font [text-underline-position:under]', {
+    className: cx('_underline _decoration-from-font [text-underline-position:under]', {
       'text-primary-600': !customColor,
     }, className),
     href: href || to || toTab,

components/PageHeadline/index.tsx

@@ -11,7 +11,7 @@ export function PageHeadline(props: Props) {
 
   return (
     <div>
-      <div className="nx-mt-2 nx-text-4xl nx-font-bold nx-tracking-tight">{title}</div>
+      <div className="_mt-2 _text-4xl _font-bold _tracking-tight">{title}</div>
       {
         Boolean(subTitle) && (
           <div className="mt-1 text-xl text-gray-400">{subTitle}</div>

components/Table/index.tsx

@@ -2,14 +2,14 @@ export function Table(props) {
   const { titles, rows } = props
 
   return (
-    <table className="nx-block nx-overflow-x-scroll nextra-scrollbar nx-mt-6 nx-p-0 first:nx-mt-0">
+    <table className="_block _overflow-x-scroll nextra-scrollbar _mt-6 _p-0 first:_mt-0">
       {
         Boolean(titles) && (
           <thead>
-            <tr className="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20">
+            <tr className="_m-0 _border-t _border-gray-300 _p-0 dark:_border-gray-600 even:_bg-gray-100 even:dark:_bg-gray-600/20">
               {
                 titles.map((title, index) => (
-                  <td key={index} className="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600">
+                  <td key={index} className="_m-0 _border _border-gray-300 _px-4 _py-2 _font-semibold dark:_border-gray-600">
                     {title}
                   </td>
                 ))
@@ -21,12 +21,12 @@ export function Table(props) {
       <tbody>
         {
           rows.map((cells, index) => (
-            <tr key={index} className="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20">
+            <tr key={index} className="_m-0 _border-t _border-gray-300 _p-0 dark:_border-gray-600 even:_bg-gray-100 even:dark:_bg-gray-600/20">
               {
                 cells.map((content, index) => (
                   <td
                     key={index}
-                    className="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600"
+                    className="_m-0 _border _border-gray-300 _px-4 _py-2 dark:_border-gray-600"
                   >
                     {content}
                   </td>

style.css

@@ -101,6 +101,6 @@ body {
   margin-left: auto !important;
 }
 
-.nextra-code-block.nx-mt-6 {
+.nextra-code-block._mt-6 {
   margin-top: 0.8rem !important;
 }