DEV Community: Raddito

How to Customize a Tailwind CSS Website Template for a Client Project

Raddito — Mon, 09 Nov 2026 11:12:45 +0000

Building a website for a client doesn't always mean starting from a blank HTML file.

Sometimes, the smarter approach is to start with a well-structured template and spend your time on what makes the client's website unique: branding, content, usability, and performance.

But downloading a template is the easy part.

The real challenge is turning that template into a finished website that doesn't look like a template.

In this tutorial, we'll walk through how to customize a Tailwind CSS website template for a client project, from choosing a starter to deploying the finished site.

We'll use Studio, a free HTML, Tailwind CSS, and Vite website template from Raddito, as our example.

By the end, you'll know how to:

Choose a suitable starter template.
Customize colors and typography.
Replace demo content, images, and links.
Configure and build a project with Vite.
Test responsive layouts.
Deploy a production-ready static website.

Let's get started.

1. Choose the right starter template

Before touching any code, choose a template that matches the project's requirements.

A good starter template should already have the major sections your client needs.

For example, if you're creating a website for a digital agency, look for a design with a strong hero, services, project portfolio, and clear calls to action.

For this tutorial, we'll use Studio by Raddito.

Official Studio preview: the original hero and selected-projects layouts.

Template details:

Feature	Studio
Technology	HTML, Tailwind CSS 3, Vite 5
Design	Dark, modern agency landing page
Sections	Hero, statistics, services, portfolio, articles, CTA, footer
Responsive	Desktop, tablet, and mobile
Price	Free

You can explore the live Studio demo to see how the original layout behaves.

For our example, imagine we're customizing Studio for a fictional creative business called Northstar Studio.

Our client wants a modern portfolio website with a different color palette, updated typography, real project information, and a clear contact action.

We'll keep the useful layout and replace the branding.

Tip: Before using any template in a paid client project, check its license and any restrictions on assets, attribution, or redistribution.

2. Download the template and inspect the files

After downloading and extracting the template, open the project directory in your code editor.

Studio includes the main HTML page, Tailwind configuration, custom CSS, assets, and the Vite project setup.

The important files to look for are:

studio/
├── index.html
├── tailwind.config.js
├── package.json
├── style.css
├── assets/
└── README

This is a simplified overview; check the downloaded version for its exact filenames and asset locations.

Here's what matters:

index.html contains the landing-page structure and content.
tailwind.config.js defines Tailwind customization.
style.css contains the template's additional styles.
package.json contains the project's dependencies and scripts.
assets/ contains images, icons, and other visual resources.

Before making any changes, save a copy or initialize Git:

git init
git add .
git commit -m "Initial Studio template"

This gives you an easy way to compare your changes with the original starter.

Next, install the dependencies:

npm install

Start the development server:

npm run dev

Vite will print a local development URL in your terminal, commonly:

http://localhost:5173/

Open that URL in your browser.

Make sure the original template works before changing anything. Fixing setup issues now is easier than debugging them after a full redesign.

3. Customize the brand colors

One of Tailwind CSS's biggest advantages is that you can build a consistent design system using reusable utility classes.

Studio's original color palette includes:

Midnight navy: #0B0A1F
Violet: #4F3DFE
White: #FFFFFF

Let's say Northstar Studio uses a dark slate background with teal accents.

Our new colors will be:

/* Example client brand colors */

--brand-background: #0F172A;
--brand-primary: #14B8A6;
--brand-text: #F8FAFC;

Update the Tailwind configuration

Because this version of Studio uses Tailwind CSS 3, we can define custom colors in tailwind.config.js.

For example:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{html,js}",
  ],

  theme: {
    extend: {
      colors: {
        "brand-bg": "#0F172A",
        "brand-primary": "#14B8A6",
        "brand-text": "#F8FAFC",
      },
    },
  },

  plugins: [],
};

This is an example configuration, not a verbatim copy of Studio's original file. Merge these color entries into your existing configuration rather than deleting template-specific settings.

Now you can use the new colors directly in HTML:

<section class="bg-brand-bg text-brand-text">
  <h1 class="text-4xl font-bold">
    Design that moves your business forward.
  </h1>

  <a
    href="#contact"
    class="inline-block rounded-lg
           bg-brand-primary px-6 py-3
           font-semibold text-slate-950"
  >
    Start a Project
  </a>
</section>

Notice these classes:

bg-brand-bg applies the custom background.
text-brand-text applies the primary text color.
bg-brand-primary applies the new accent.

You'll also need to replace existing color utilities throughout the template, including buttons, navigation links, icons, and hover states.

Important: Updating the config doesn't automatically replace every hardcoded color in the HTML or style.css.

Search for the original violet and navy values, and review any gradients or decorative elements that use them.

4. Change the typography

Typography can completely change how a website feels.

Studio originally uses Clash Display for its expressive headlines and Roboto for body text.

For our fictional Northstar Studio project, we'll use:

Manrope for headings.
Inter for paragraphs, navigation, and buttons.

Load the fonts

In index.html, add the following to the document's <head>:

<link
  rel="preconnect"
  href="https://fonts.googleapis.com"
/>

<link
  rel="preconnect"
  href="https://fonts.gstatic.com"
  crossorigin
/>

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap"
  rel="stylesheet"
/>

For privacy-sensitive projects, consider self-hosting the appropriate font files instead.

Configure Tailwind font families

Add the font families to the existing theme.extend configuration:

fontFamily: {
  display: ["Manrope", "sans-serif"],
  body: ["Inter", "sans-serif"],
},

Then apply them to your content:

<h1
  class="font-display text-4xl font-bold
         leading-tight md:text-6xl"
>
  Websites built for ambitious brands.
</h1>

<p
  class="mt-6 max-w-xl font-body
         text-base leading-7
         text-slate-300 md:text-lg"
>
  We create clear, responsive digital
  experiences that help businesses grow.
</p>

We've also added responsive text sizes.

The heading starts at text-4xl and increases to text-6xl on medium-sized screens and above.

This gives the page a stronger hierarchy without making the mobile layout overwhelming.

5. Replace the placeholder content

This is the step that often takes more attention than expected.

A template can look polished while still containing irrelevant content, sample projects, outdated dates, or links that lead nowhere.

For Studio, check the hero, animated statistics, services, selected projects, article cards, contact links, and footer.

Customize the hero

Studio's original hero says:

Design-driven development of your web product

For Northstar Studio, we might replace that with:

Websites built for ambitious brands.

Here's an example of a customized hero content block:

<section
  class="bg-brand-bg px-6 py-16
         text-brand-text md:py-24"
>
  <div class="mx-auto max-w-6xl">

    <p
      class="font-body text-sm font-semibold
             uppercase tracking-widest
             text-brand-primary"
    >
      Northstar Studio
    </p>

    <h1
      class="mt-5 max-w-3xl font-display
             text-4xl font-bold leading-tight
             md:text-6xl lg:text-7xl"
    >
      Websites built for
      <span class="text-brand-primary">
        ambitious brands.
      </span>
    </h1>

    <p
      class="mt-6 max-w-xl font-body
             text-base leading-7
             text-slate-300 md:text-lg"
    >
      We design and develop thoughtful
      digital experiences for growing
      businesses.
    </p>

    <a
      href="#contact"
      class="mt-8 inline-block rounded-lg
             bg-brand-primary px-6 py-3
             font-semibold text-slate-950
             transition hover:opacity-90"
    >
      Discuss Your Project
    </a>

  </div>
</section>

You can adapt this markup within Studio's existing hero rather than replacing the entire section and losing its wave effects or other design details.

Replace the images

Don't leave demo images in your client's final website.

Use approved photos, portfolio screenshots, and brand assets.

For example:

<img
  src="./assets/northstar-project.webp"
  alt="Northstar Studio branding project displayed on a desktop screen"
  class="h-auto w-full rounded-2xl object-cover"
  loading="lazy"
/>

Adjust the path to match the actual asset directory.

Use descriptive filenames, relevant alternative text, and appropriately compressed images.

Keep the hero image eager-loaded if it's essential to the initial viewport; lazy loading is better suited to images further down the page.

Update portfolio cards

Studio features a Selected Projects section, making it useful for agency and freelancer websites.

Studio's original project-showcase design. Replace the example imagery and captions with the client's approved work.

For a client site, replace the demonstration projects with real examples.

A project card could look like:

<article class="overflow-hidden rounded-2xl">
  <img
    src="./assets/client-project.webp"
    alt="Preview of a completed client website"
    class="h-auto w-full object-cover"
    loading="lazy"
  />

  <div class="mt-5">
    <p class="text-sm text-brand-primary">
      Website Design
    </p>

    <h3 class="mt-2 font-display text-2xl font-bold">
      Client Project Name
    </h3>

    <a
      href="/projects/client-project.html"
      class="mt-3 inline-block underline
             underline-offset-4"
    >
      View Case Study
    </a>
  </div>
</article>

Only use the case-study URL if that page exists. Otherwise, replace it with a working project link or remove the action.

Client-project tip: Never publish placeholder testimonials, fabricated performance statistics, or portfolio work that the client doesn't have permission to display.

If Studio's animated statistics are retained, update their numeric targets and labels too.

Make contact buttons functional

Studio's contact buttons are links, not a working contact-form backend.

For a simple site, a mail link can be enough:

<a
  href="mailto:hello@your-client-domain.com"
  class="inline-flex items-center rounded-lg
         bg-brand-primary px-6 py-3
         font-semibold text-slate-950"
>
  Email Us
</a>

Replace that example address with the client's real address.

If you need a contact form, connect it to a tested form endpoint or backend. An HTML form without submission handling doesn't automatically send messages.

Also update:

The page title and meta description.
Logo and favicon.
Social media URLs.
Navigation anchors.
Footer copyright and attribution.
Video links and embedded media.
Article links and publication dates.

6. Configure Vite for development and deployment

Studio already uses Vite, so there's no need to create a new Vite project.

Check the scripts in package.json. A typical Vite setup includes:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Preserve any additional scripts or dependencies that come with your downloaded template.

Development mode

Run:

npm run dev

Vite starts a local server and updates the page as you edit supported project files.

Production build

When the site is ready, run:

npm run build

Vite normally creates a dist/ directory containing the production-ready files.

To test that build locally:

npm run preview

This is a preview server, not the server you should use for production hosting.

Do you need to change vite.config.js?

For a website deployed at the root of a domain, Vite's default base setting is usually sufficient.

If you want an explicit config, you could use:

import { defineConfig } from "vite";

export default defineConfig({
  base: "/",

  build: {
    outDir: "dist",
  },
});

For a project hosted at a subpath such as:

https://example.com/client-site/

you would instead set:

base: "/client-site/",

The base path matters because it affects how built assets are referenced.

Don't change this setting unnecessarily, and test any hardcoded asset URLs when deploying under a subdirectory.

7. Test the website on different screen sizes

Tailwind CSS makes responsive design easier, but responsive utility classes don't guarantee a flawless layout.

After updating the content, test the website at different viewport widths.

A quick starting point:

Device	Example viewport width
Small mobile	375px
Tablet	768px
Desktop	1280px
Large desktop	1440px

Open Chrome DevTools, enable Device Toolbar, and resize the viewport.

Pay attention to navigation, large headlines, portfolio images, button widths, and content spacing.

Make your layouts responsive

Suppose you have a two-column services section.

Instead of forcing two columns on every screen:

<div class="grid grid-cols-2 gap-8">

Use a responsive grid:

<div
  class="grid grid-cols-1
         gap-6 md:grid-cols-2
         lg:gap-8"
>

Now the layout uses:

One column on small screens.
Two columns from the md breakpoint onward.
More spacing on large screens.

Similarly, responsive headings can use:

<h2
  class="font-display text-3xl
         font-bold leading-tight
         sm:text-4xl lg:text-5xl"
>
  Our Selected Projects
</h2>

This avoids oversized headings on small devices.

A simple overflow check

While testing, this JavaScript can help detect horizontal overflow:

const overflowing = document.documentElement.scrollWidth
  > document.documentElement.clientWidth;

console.log("Horizontal overflow:", overflowing);

Run it in the browser console on the page you're testing.

If it returns true, inspect the layout for oversized fixed-width elements, images, long text, or unwanted margins.

Also test keyboard navigation, visible focus states, link destinations, and mobile menus.

A mobile navigation control must be operable, not simply visible.

For a more realistic review, open the Studio live preview in your browser alongside the customized local site. Compare how the hero, portfolio, and footer behave at narrow widths.

8. Check performance and accessibility

Before deploying, do a final quality check.

For performance, pay attention to large images, unnecessary scripts, font loading, and layout shifts.

Studio also uses external animation and smooth-scrolling libraries. Keep the effects that genuinely improve the experience, but test whether they remain usable on mobile and for visitors who prefer reduced motion.

For accessibility, check that headings follow a logical order, interactive elements are keyboard-accessible, and text has enough contrast against its background.

You can also use Lighthouse in Chrome DevTools to inspect performance, accessibility, and other quality signals.

For example, a simple SEO update in index.html might be:

<title>
  Northstar Studio | Website Design & Development
</title>

<meta
  name="description"
  content="Northstar Studio creates responsive websites and thoughtful digital experiences for growing brands."
/>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Remember that Lighthouse is an audit tool, not a guarantee of real-world performance. Test the deployed site as well.

9. Deploy the finished website

Once you've checked the content, layout, and functionality, it's time to publish.

Because Studio is a static HTML project, you can deploy the production build to a static hosting service.

We'll use Netlify as an example.

Option A: Manual deployment

First, build the site:

npm run build

Then:

Log in to Netlify.
Create a new site using the manual deployment option.
Upload the generated dist/ directory.
Open the deployment URL and test the site.

Make sure you upload the built website, not just the unprocessed source files.

Option B: Deploy from Git

For a client website that will receive updates, connecting a Git repository is often more convenient.

Push your project to your Git provider, then configure your hosting platform with:

Build command:
npm run build

Publish directory:
dist

The hosting service can rebuild your website when you push new changes to the connected branch.

After deployment, configure the client's custom domain and HTTPS.

Finally, test the public URL.

Check that CSS, images, navigation, videos, forms or email links, and any additional pages still work.

10. Final pre-launch checklist

Before handing the website to the client, confirm the following:

[ ] Brand colors and typography match the approved design.
[ ] Demo content, images, and sample projects are replaced.
[ ] All buttons and navigation links work.
[ ] Project information and statistics are accurate.
[ ] No placeholder testimonials remain.
[ ] The website works on mobile, tablet, and desktop.
[ ] Images have appropriate alternative text.
[ ] Keyboard navigation and contrast are checked.
[ ] Page titles, meta descriptions, and favicon are updated.
[ ] The production build completes successfully.
[ ] The deployed website has been tested.
[ ] Licensing, credits, and client handover requirements are satisfied.

A final client review is also valuable before the site goes live.

Final thoughts

Customizing a Tailwind CSS template isn't just about changing a few colors and replacing the logo.

The goal is to turn a reusable layout into a website that feels purposeful, represents the client's business, and works reliably across devices.

A well-chosen starter can save development time. Tailwind makes visual changes manageable, while Vite provides a straightforward development and build workflow.

The important part is putting that time back into the things that matter: content, accessibility, usability, and attention to detail.

Have you customized a Tailwind CSS template for a client before?

What took the most time: branding, responsive layouts, content, or deployment?

Share your experience in the comments!

Tutorial by Raddito, a web design and development team creating website templates and client-focused web experiences.

Example template: Studio — Free HTML, Tailwind CSS & Vite Template

Further reading: Tailwind CSS documentation · Vite deployment guide

Build Your First WordPress Plugin: Add Reading Time Without Dependencies

Raddito — Mon, 09 Nov 2026 10:50:31 +0000

Ever wanted to add a small feature to a WordPress website without installing another plugin?

Maybe it's a reading-time indicator, a custom notice, or something specific to your client's project.

The good news? You don't need a complicated framework to get started.

WordPress has a powerful system of hooks that lets you extend its functionality with just a few lines of PHP.

In this tutorial, we'll build a tiny plugin that automatically displays an estimated reading time above blog posts.

What you'll learn:

How WordPress plugins work
How to create a plugin from scratch
How to use the the_content filter
How to calculate reading time with PHP
How to safely display custom content

And the best part? We won't need any third-party dependencies.

First, a quick hello! 👋

We're Raddito, a web design and development team specializing in WordPress, WooCommerce, and modern website-building workflows.

This is our first post on DEV Community!

We're here to share practical development tutorials, lessons from building websites, and solutions to common WordPress challenges.

Let's start by building something useful.

Step 1: Understand how WordPress plugins work

A WordPress plugin is essentially PHP code that extends the behavior of a WordPress website.

Instead of modifying WordPress core files, you connect your code to WordPress using hooks.

There are two main types:

Actions: Run your code when something happens.

Filters: Allow you to modify data before WordPress uses or displays it.

For our reading-time feature, we'll use a filter called the_content.

This filter gives us access to post content before WordPress displays it.

That means we can add our reading-time indicator without editing individual blog posts.

Step 2: Create your plugin folder

Open your WordPress installation and navigate to:

wp-content/plugins/

Create a new folder named:

raddito-reading-time

Inside that folder, create a PHP file:

raddito-reading-time.php

Your directory structure should look like this:

wp-content/
└── plugins/
    └── raddito-reading-time/
        └── raddito-reading-time.php

Simple, right?

Now let's make WordPress recognize it.

Step 3: Add the plugin header

Open raddito-reading-time.php and add:

<?php
/**
 * Plugin Name: Raddito Reading Time
 * Description: Shows an estimated reading time on single blog posts.
 * Version: 1.0.0
 * Author: Raddito
 * Text Domain: raddito-reading-time
 */

This header tells WordPress that the PHP file is a plugin.

Next, add a small security check:

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

This prevents the plugin file from being executed directly outside WordPress.

Now go to your WordPress dashboard:

Plugins → Installed Plugins

You should see Raddito Reading Time in the list.

Don't activate it just yet. We still need to add the actual functionality.

Step 4: Calculate reading time

Reading time is usually estimated by dividing the number of words by an average reading speed.

For this example, we'll use 200 words per minute.

The formula is:

Reading time = Total words / 200

So a 600-word article would have an estimated reading time of 3 minutes.

Let's add a function below our existing code:

function raddito_add_reading_time( $content ) {

    if (
        ! is_singular( 'post' ) ||
        ! in_the_loop() ||
        ! is_main_query()
    ) {
        return $content;
    }

    $post_id = get_the_ID();

    if ( ! $post_id ) {
        return $content;
    }

    $raw_content = get_post_field(
        'post_content',
        $post_id,
        'raw'
    );

    $plain_text = wp_strip_all_tags(
        strip_shortcodes( $raw_content )
    );

    $word_count = str_word_count( $plain_text );

    $minutes = max(
        1,
        (int) ceil( $word_count / 200 )
    );

    $label = sprintf(
        /* translators: %d: estimated reading time in minutes. */
        __( '%d min read', 'raddito-reading-time' ),
        $minutes
    );

    return '<p class="raddito-reading-time">' .
        esc_html( $label ) .
        '</p>' .
        $content;
}

Let's break down what's happening.

1. Check the page context

if (
    ! is_singular( 'post' ) ||
    ! in_the_loop() ||
    ! is_main_query()
) {
    return $content;
}

We only want the reading-time indicator to appear within the main content of individual blog posts.

This helps prevent it from appearing in unrelated content areas.

2. Get the original post content

$raw_content = get_post_field(
    'post_content',
    $post_id,
    'raw'
);

We use the original content rather than the filtered content to avoid counting HTML generated by other plugins.

3. Remove unnecessary markup

$plain_text = wp_strip_all_tags(
    strip_shortcodes( $raw_content )
);

We remove HTML and registered shortcodes so they don't distort our estimate.

4. Calculate the reading time

$word_count = str_word_count( $plain_text );

$minutes = max(
    1,
    (int) ceil( $word_count / 200 )
);

The ceil() function rounds up, while max() ensures that even very short posts show at least one minute.

5. Prepare the output safely

We use WordPress translation and escaping functions to create the final label.

This is an important habit when writing WordPress plugins: escape dynamic content when outputting it into HTML.

Step 5: Connect the function to WordPress

We have our function, but WordPress doesn't know when to run it.

Add this line at the bottom of your plugin:

add_filter(
    'the_content',
    'raddito_add_reading_time'
);

That's it!

Whenever WordPress processes post content through this filter, our function can add the reading-time label.

Now activate your plugin and open a published blog post.

You should see something like:

3 min read

Followed by your normal article content.

No extra dependencies. No page builder required.

Step 6: Make the reading-time label look better

Our plugin works, but a little CSS can improve the appearance.

Add the following CSS through your theme's custom CSS area or stylesheet:

.raddito-reading-time {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.35rem 0.75rem;

    background: #f1f5f9;
    color: #334155;

    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
}

Now the reading-time label will look more like a small badge.

You can adjust the colors, spacing, and typography to match your website's design system.

Step 7: Test your plugin

Before using custom functionality on a production website, test it.

Here are a few things worth checking:

Open a short article and confirm it displays at least 1 min read.
Open a longer article and verify that the estimate changes.
Visit a standard WordPress page and confirm the label doesn't appear.
Check your blog archive and make sure excerpts are unaffected.
Disable the plugin and confirm the label disappears.

Also, keep in mind that str_word_count() is most appropriate for English-language content. Sites using languages without conventional space-separated words will need a different counting strategy.

Our estimate also doesn't include words generated dynamically by shortcodes or blocks.

For a simple English-language blog, though, this is a useful starting point.

What did we actually learn?

We built a working WordPress plugin using one PHP file and a WordPress filter.

Along the way, we explored a few important development concepts:

Separation of concerns: We added functionality without modifying the theme or WordPress core.

Hooks: We learned how to extend WordPress behavior through filters.

Context-aware logic: We limited the feature to the content where it belongs.

Safe output: We used WordPress escaping functions before displaying generated text.

These principles become even more valuable as you work on larger WordPress projects.

Where could we take this next?

Once you're comfortable with this basic plugin, you could extend it further.

For example, you could add an admin setting to change the words-per-minute value, support custom post types, or create a Gutenberg block for displaying the reading time wherever you want.

You could also make the word-counting logic more suitable for multilingual websites.

Small projects like this are a great way to become familiar with WordPress development.

Final thoughts

At Raddito, we work with WordPress regularly, and one lesson keeps coming up: the best solution isn't always the one with the most features.

Sometimes, a small piece of well-structured code is exactly what a project needs.

This was our first tutorial here on DEV, and we're looking forward to sharing more practical lessons about WordPress, development workflows, website performance, and building better experiences for users.

Now we're curious:

What's one small WordPress feature you've built yourself instead of installing a plugin?

Share it in the comments. We'd love to hear about it!

About Raddito

We're a WordPress web design and development team helping businesses build fast, functional, and easy-to-manage websites.

Explore our work: Raddito.agency
Explore our web templates: Raddito.net

Useful documentation: