diff --git a/src/_includes/now.liquid b/src/_includes/now.liquid
index 8a3e5939..5d7c982f 100644
--- a/src/_includes/now.liquid
+++ b/src/_includes/now.liquid
@@ -15,6 +15,6 @@ layout: default
 {% render "partials/now/links.liquid", links:links %}
 {% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6 %}
 {% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6 %}
-<p class="now__explainer text-center">
+<p class="now__explainer text--centered">
   This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.
 </p>
diff --git a/src/_includes/partials/footer.liquid b/src/_includes/partials/footer.liquid
index ad75d5bf..21a1d8b0 100644
--- a/src/_includes/partials/footer.liquid
+++ b/src/_includes/partials/footer.liquid
@@ -1,10 +1,10 @@
 <footer>
-  <nav aria-label="Social icons" class="flex--centered text-center">
+  <nav aria-label="Social icons" class="flex--centered text--centered">
     {% for link in nav.social %}
       {% render "partials/nav/linked-icon.liquid", name: link.name, link: link.url, icon: link.icon %}
     {% endfor %}
   </nav>
-  <nav aria-label="Secondary site navigation" class="flex--centered text-center">
+  <nav aria-label="Secondary site navigation" class="flex--centered text--centered">
     {% for link in nav.footer %}
       {% render "partials/nav/link.liquid", page: page, link: link.name, icon: link.icon %}
       {% if not forloop.last %}<span>•</span>{% endif %}
diff --git a/src/_includes/partials/paginator.liquid b/src/_includes/partials/paginator.liquid
index 3575f51b..14ee1bfa 100644
--- a/src/_includes/partials/paginator.liquid
+++ b/src/_includes/partials/paginator.liquid
@@ -17,7 +17,7 @@
       {% tablericon "arrow-left" "Prevous" %}
     </button>
   {% endif %}
-  <div class="text-center">
+  <div class="text--centered">
     <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
   </div>
   {% if pagination.href.next %}
diff --git a/src/_includes/webrings/css-joy.liquid b/src/_includes/webrings/css-joy.liquid
index f554928f..9d5286a9 100644
--- a/src/_includes/webrings/css-joy.liquid
+++ b/src/_includes/webrings/css-joy.liquid
@@ -1,6 +1,6 @@
 <div class="webring__wrapper">
   <a class="no-underline" href="https://cs.sjoy.lol">
-    <h3 class="text-center">CSS JOY Webring</h3>
+    <h3 class="text--centered">CSS JOY Webring</h3>
   </a>
   <div class="webring__centered flex--centered">
     <a href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
diff --git a/src/_includes/webrings/the-claw.liquid b/src/_includes/webrings/the-claw.liquid
index e4ba732d..d8f58315 100644
--- a/src/_includes/webrings/the-claw.liquid
+++ b/src/_includes/webrings/the-claw.liquid
@@ -2,7 +2,7 @@
   <div class="webring__centered flex--centered">
     <img src="/assets/img/webrings/theclaw.png" alt="The Claw Webring" />
   </div>
-  <h3 class="text-center">The Claw Webring</h3>
+  <h3 class="text--centered">The Claw Webring</h3>
   <div class="webring__centered flex--centered">
     <a href="https://github.com/whitep4nth3r/the-claw-webring" class="pill--button">
       {% tablericon "user-plus" "Join!" %} Join!
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index ba04e8db..6b43dab5 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -454,7 +454,7 @@ li {
   text-decoration: none !important;
 }
 
-.text-center {
+.text--centered {
   text-align: center !important;
 }
 
diff --git a/src/pages/404.html b/src/pages/404.html
index aef9fdde..5bf51e67 100644
--- a/src/pages/404.html
+++ b/src/pages/404.html
@@ -10,7 +10,7 @@ image: /assets/img/404.jpg
 <style>{{ css }}</style>
 <div class="four-oh-four__wrapper">
   <img src="/assets/img/404.jpg" alt="404 — oops!" class="image__banner" />
-  <div class="text-center">
+  <div class="text--centered">
     <h2 class="page__header">{{ title }}</h2>
     <h3>What kind of idiots do you have working here?</h3>
     <div class="flex justify-center">
diff --git a/src/pages/about.md b/src/pages/about.md
index 103d765a..e0de1294 100644
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -12,7 +12,7 @@ image: /assets/img/ogi/about.jpg
   {% capture about_alt %}{{ meta.siteName }} - image by David Neal / @reverentgeek{% endcapture %}
   <img src="/assets/img/avatar.webp" alt="{{ about_alt }}" />
 </div>
-<h2 class="page__header text-center">Hi, I'm Cory</h2>
+<h2 class="page__header text--centered">Hi, I'm Cory</h2>
 
 I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, [music](https://last.fm/user/coryd_), writing, [reading](https://app.thestorygraph.com/profile/coryd), [tv](https://trakt.tv/users/cdransf) and [movies](https://trakt.tv/users/cdransf).
 
diff --git a/src/pages/contact-success.html b/src/pages/contact-success.html
index ebded327..266c5f0a 100644
--- a/src/pages/contact-success.html
+++ b/src/pages/contact-success.html
@@ -5,7 +5,7 @@ permalink: /contact/success.html
 image: /assets/img/ogi/contact.jpg
 ---
 
-<div class="text-center">
+<div class="text--centered">
   <h2>{{ title }}</h2>
   <h3>I'll be in touch soon!</h3>
   <a href="/" class="pill--button">
diff --git a/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md b/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
index 3ebd49f9..b6f1fdf8 100644
--- a/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
+++ b/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
@@ -111,7 +111,7 @@ export default function Now(props) {
           <Reading books={books} />
           <Movies movies={movies} />
           <TV tv={tv} />
-          <p className="pt-8 text-center text-xs text-gray-900 dark:text-gray-100">
+          <p className="pt-8 text--centered text-xs text-gray-900 dark:text-gray-100">
             (This is a{' '}
             <Link
               className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
diff --git a/src/posts/2023/drying-up-now-page-templates-eleventy.md b/src/posts/2023/drying-up-now-page-templates-eleventy.md
index 15d98b5a..965630c5 100644
--- a/src/posts/2023/drying-up-now-page-templates-eleventy.md
+++ b/src/posts/2023/drying-up-now-page-templates-eleventy.md
@@ -141,7 +141,7 @@ layout: main
 {% render "partials/now/links.liquid", links:links %}
 {% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6, loading: 'lazy' %}
 {% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6, loading: 'lazy' %}
-<p class="text-xs text-center pt-6">This is a
+<p class="text-xs text--centered pt-6">This is a
   <a href="https://nownownow.com/about">now page</a>, and if you have your own site,
   <a href="https://nownownow.com/about">you should make one too</a>.</p>
 ```
diff --git a/src/posts/2023/lazy-select-based-pagination-eleventy.md b/src/posts/2023/lazy-select-based-pagination-eleventy.md
index d6bb677d..e79cc48b 100644
--- a/src/posts/2023/lazy-select-based-pagination-eleventy.md
+++ b/src/posts/2023/lazy-select-based-pagination-eleventy.md
@@ -15,7 +15,7 @@ Given that I was already iterating through all pages in my posts collection, my
   <div class="flex flex-row items-center">
     <select
       id="pagination"
-      class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-blue-500 hover:bg-blue-500 dark:hover:bg-blue-300 mr-1 focus-visible:outline-none focus-visible:bg-blue-400 appearance-none text-center"
+      class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-blue-500 hover:bg-blue-500 dark:hover:bg-blue-300 mr-1 focus-visible:outline-none focus-visible:bg-blue-400 appearance-none text--centered"
       style="text-align-last:center">
       {% for pageEntry in pagination.pages %}
         <option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>