♻️ refactor: remove all @apply and use inline styling

Author: pyanderson

backend/templates/common/index.html

@@ -1,13 +1,12 @@
 {% extends 'base.html' %}
 
-
 {% block body %}
-  <div class="container">
-    <h1 class="heading-1">Django React Boilerplate Example App</h1>
-    <p class="paragraph">
+  <div class="max-w-5xl mx-auto px-4">
+    <h1 class="text-5xl mb-2">Django React Boilerplate Example App</h1>
+    <p class="mb-2">
       Below is an example of a React app included in the Django template.<br/>
-      Check <code class="inline-code">backend/templates/common/index.html</code> and <code class="inline-code">frontend/js/index.js</code> to understand how they're linked:
+      Check <code class="px-1.5 py-0.5 text-sm font-mono text-pink-600 bg-gray-100 rounded">backend/templates/common/index.html</code> and <code class="px-1.5 py-0.5 text-sm font-mono text-pink-600 bg-gray-100 rounded">frontend/js/index.js</code> to understand how they're linked:
     </p>
   </div>
-  <div class="container" id="react-app"></div>
+  <div class="max-w-5xl mx-auto px-4" id="react-app"></div>
 {% endblock %}

backend/templates/defender/lockout.html

@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block body %}
-<div class="container">
+<div class="max-w-5xl mx-auto px-4">
     <h1>Temporary User Lockout</h1>
     <p>
         You have been locked out due to too many failed attempts. You have reached the failure limit of {{ failure_limit }} attempts.
@@ -11,4 +11,4 @@ <h1>Temporary User Lockout</h1>
     </p>
     <p>Please try again after the cool off period.</p>
 </div>
-{% endblock %}
+{% endblock %}

frontend/css/style.css

@@ -1,69 +1 @@
 @import "tailwindcss";
-
-/* Django background */
-#django-background {
-  @apply text-[#092e20] text-[11pt] bg-no-repeat bg-[auto_200px] bg-center h-[300px] bg-[url('../assets/images/django-logo-positive.png')];
-}
-
-/* Logo wrapper */
-#django-logo-wrapper {
-  @apply text-[#092e20] mb-4;
-}
-
-#django-logo-wrapper > img {
-  @apply w-[100px];
-}
-
-/* Page container */
-.container {
-  @apply max-w-5xl mx-auto px-4;
-}
-
-/* Inline code */
-.inline-code {
-  @apply px-1.5 py-0.5 text-sm font-mono text-pink-600 bg-gray-100 rounded;
-}
-/* Headings */
-.heading-1 {
-  @apply text-5xl mb-2;
-}
-
-.heading-2 {
-  @apply text-4xl mb-2;
-}
-
-/* Paragraphs */
-.paragraph {
-  @apply mb-2;
-}
-
-/* Button */
-.btn {
-  @apply px-2 py-1 border border-black text-black rounded-md
-         hover:bg-black hover:text-white transition duration-200 cursor-pointer;
-}
-
-/* TopNav */
-/* Container */
-.nav {
-  @apply mx-auto max-w-6xl mt-4 mb-6 rounded-xl bg-zinc-900/80 backdrop-blur ring-1 ring-white/10;
-}
-
-/* Brand */
-.nav-brand {
-  @apply text-white font-semibold tracking-tight mr-2;
-}
-
-/* Links */
-.nav-link {
-  @apply px-3 py-2 rounded-lg text-sm font-medium text-zinc-300 transition;
-}
-.nav-link:hover {
-  @apply text-white bg-white/5;
-}
-.nav-link:focus-visible {
-  @apply outline-none ring-2 ring-white/40;
-}
-.nav-link--active {
-  @apply text-white bg-white/10;
-}

frontend/css/users.css

@@ -3,15 +3,23 @@ import { NavLink } from "react-router";
 const TopNav = () => {
   return (
     <header className="sticky top-0 z-50">
-      <nav aria-label="Primary" className="nav">
+      <nav
+        aria-label="Primary"
+        className="mx-auto mt-4 mb-6 max-w-6xl rounded-xl bg-zinc-900/80 backdrop-blur ring-1 ring-white/10"
+      >
         <div className="flex items-center gap-2 px-4 py-2">
-          <a className="nav-brand" href="/">
+          <a className="mr-2 font-semibold tracking-tight text-white" href="/">
             django-react-boilerplate
           </a>
 
           <NavLink
             className={({ isActive }) =>
-              isActive ? "nav-link nav-link--active" : "nav-link"
+              [
+                "px-3 py-2 rounded-lg text-sm font-medium text-zinc-300 transition",
+                "hover:text-white hover:bg-white/5",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40",
+                isActive ? "text-white bg-white/10" : "",
+              ].join(" ")
             }
             end
             to="/"
@@ -21,7 +29,12 @@ const TopNav = () => {
 
           <NavLink
             className={({ isActive }) =>
-              isActive ? "nav-link nav-link--active" : "nav-link"
+              [
+                "px-3 py-2 rounded-lg text-sm font-medium text-zinc-300 transition",
+                "hover:text-white hover:bg-white/5",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40",
+                isActive ? "text-white bg-white/10" : "",
+              ].join(" ")
             }
             to="/users"
           >

frontend/js/components/TopNav.tsx

@@ -19,22 +19,26 @@ const Home = () => {
   return (
     <>
       <TopNav />
-      <h2 className="heading-2">Static assets</h2>
-      <div id="django-background">
+      <h2 className="text-4xl mb-2">Static assets</h2>
+      <div className="text-[#092e20] text-[11pt] bg-no-repeat bg-[auto_200px] bg-center h-[300px] bg-[url('../assets/images/django-logo-positive.png')]">
         If you are seeing the green Django logo on a white background and this
         text color is #092e20, frontend static files serving is working:
       </div>
-      <div id="django-logo-wrapper">
+      <div className="text-[#092e20] mb-4">
         <div>
           Below this text, you should see an img tag with the white Django logo
           on a green background:
         </div>
-        <img alt="Django Negative Logo" src={DjangoImgSrc} />
+        <img
+          alt="Django Negative Logo"
+          className="w-[100px]"
+          src={DjangoImgSrc}
+        />
       </div>
-      <h2 className="heading-2">Rest API</h2>
-      <p className="paragraph">{restCheck?.message}</p>
+      <h2 className="text-4xl mb-2">Rest API</h2>
+      <p className="mb-2">{restCheck?.message}</p>
       <button
-        className="btn"
+        className="px-2 py-1 border border-black text-black rounded-md hover:bg-black hover:text-white transition duration-200 cursor-pointer"
         type="button"
         onClick={() => setShowBugComponent(true)}
       >

frontend/js/pages/Home.tsx

@@ -2,64 +2,67 @@ import { Link, useLoaderData } from "react-router";
 
 import { PaginatedUserList } from "../api";
 import { TopNav } from "../components";
-import "../../css/users.css";
+import { makeLink } from "../utils";
 
 const Users = () => {
   const data = useLoaderData<PaginatedUserList>();
 
-  const makeLink = (href: string | null | undefined) => {
-    if (!href) return null;
-    const u = new URL(href, window.location.origin);
-    return `?${u.searchParams.toString()}`;
-  };
-
   const prev = makeLink(data.previous);
   const next = makeLink(data.next);
 
   return (
     <>
       <TopNav />
-      <section className="users-wrap">
-        <h1 className="users-title">Users</h1>
+      <section className="mx-auto max-w-3xl px-4">
+        <h1 className="mt-4 mb-3 font-semibold text-slate-950">Users</h1>
 
-        <ul className="users-list">
+        <ul className="bg-white rounded-xl border border-zinc-300">
           {data.results.map((u) => (
-            <li key={u.id} className="users-item">
+            <li
+              key={u.id}
+              className="px-4 py-3 text-sm text-slate-900 border-t border-zinc-200 first:border-t-0 hover:bg-slate-50"
+            >
               {u.email}
             </li>
           ))}
         </ul>
 
-        <div className="users-pager">
-          <span className="users-count">
+        <div className="mt-3 flex items-center justify-between text-sm">
+          <span className="text-slate-600">
             {data.results.length} on this page • {data.count} total
           </span>
 
           <div className="flex items-center gap-2">
-            {/* Anchor elements do not natively support 'aria-disabled', which can cause accessibility issues. To improve accessibility, use 'tabIndex={-1}' with 'aria-disabled', or render a instead of when disabled. */}
             {!prev ? (
               <span
                 aria-disabled="true"
-                className="users-btn users-btn--primary users-btn--disabled"
+                className="inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm text-white bg-emerald-600 border border-transparent opacity-45 pointer-events-none"
                 tabIndex={-1}
               >
                 ← Previous
               </span>
             ) : (
-              <Link className="users-btn users-btn--primary" to={prev}>
+              <Link
+                className="inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm text-white bg-emerald-600 hover:bg-emerald-700 border border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/45"
+                to={prev}
+              >
                 ← Previous
               </Link>
             )}
+
             {!next ? (
               <span
                 aria-disabled="true"
-                className="users-btn users-btn--primary users-btn--disabled"
+                className="inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm text-white bg-emerald-600 border border-transparent opacity-45 pointer-events-none"
                 tabIndex={-1}
               >
                 Next →
               </span>
             ) : (
-              <Link className="users-btn users-btn--primary" to={next}>
+              <Link
+                className="inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm text-white bg-emerald-600 hover:bg-emerald-700 border border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/45"
+                to={next}
+              >
                 Next →
               </Link>
             )}

frontend/js/pages/Users.tsx

@@ -1,3 +1,4 @@
+import { makeLink } from "./navigation";
 import Urls from "./urls";
 
-export { Urls };
+export { Urls, makeLink };

frontend/js/utils/index.ts

@@ -0,0 +1,5 @@
+export const makeLink = (href: string | null | undefined) => {
+  if (!href) return null;
+  const u = new URL(href, window.location.origin);
+  return `?${u.searchParams.toString()}`;
+};