How I Built a Wordle Clone Using Next.js, TailwindCSS, and TypeScript

1/17/20223536 views • 4 min read




Over the past few months, Wordle has nearly consumed all of our Twitter feeds. The premise of the game is quite simple ...

  1. A random 5 letter word is generated.
  2. You have 6 attempts to guess it.
  3. Letters in the correct location will show as green.
  4. Letters in the incorrect location will show as yellow.

In this post, I'll show you how you can build a Wordle clone using Next.js, TailwindCSS, and TypeScript.


In this section, let's scaffold our Next.js application with TypeScript and TailwindCSS.

Be sure to reference the following getting-started documentation.


Next.js w/ TypeScript

Scaffold a new Next.js application with TypeScript

npx create-next-app@latest --typescript


Install and initialize Tailwind.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
  content: [
  theme: {
    extend: {},
  plugins: [],

Add the Tailwind directives to your ./globals.css.
@tailwind base;
@tailwind components;
@tailwind utilities;

Test everything

Run the development server to make sure everything is working.

npm run dev


In this section, let's build the core functionality of the Wordle game.


The random answer generator is really just the ./pages/answers.json file and a getServerSideProps function executed when requesting the index page. The answer is then injected into the Home component via its props.

import answers from "./answers.json";

export const getServerSideProps: GetServerSideProps = async () => {
  const answer = answers[Math.floor(Math.random() * answers.length)];

  return { props: { answer } };

const Home: NextPage = ({
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {


The Guessing component is a form that has a few validation rules

  1. Allow submitting when a player types in exactly 5 characters.
  2. Allow only lowercase letters.

These rules are enforced inside the handleSubmit and handleChange event handler functions.

You may have noticed that I'm passing in the guesses and setGuesses state variables here, commonly known as Prop Drilling

While there are a few ways to make this better e.g., React useContext and/or React useReducer, I'm also a fan of keeping things simple until they aren't anymore.

import { useState } from "react";

export interface FormProps {
  guesses: string[];
  setGuesses: (guesses: string[]) => void;

const Form: React.FC<FormProps> = ({ guesses, setGuesses }: FormProps) => {
  const [guess, setGuess] = useState<string>("");

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {

    if (guess.length !== 5) {

    setGuesses([...guesses, guess]);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setGuess([^a-zA-Z]/g, "").toLowerCase());

  return (
    <form onSubmit={handleSubmit}>
        className="text-center border-2 border-gray-400 p-2 m-2 text-3xl"
        placeholder="Enter your guess"

export default Form;


We need a way to display the player's guesses and correctly show their results. All of this is contained in the ./components/guesses.tsx component.

The majority of the complexity is in the getLetterBackgroundColor function, which is responsible for highlighting each letter of each guess with the correct color based on the answer.

export interface GuessesProps {
  guesses: string[];
  answer: string;

const getLetterBackgroundColor = (
  guess: string,
  index: number,
  answer: string
): string => {
  if (answer[index] === guess[index]) {
    return "bg-green-300";

  const countOfLetterOccuringInAnswer = answer
    .filter((letter: string) => letter === guess[index]).length;

  const countOfLetterOccuringInGuessBeforeCurrentIndex = guess
    .slice(0, index)
    .filter((letter: string) => letter === guess[index]).length;

  if (
    answer.includes(guess[index]) &&
    countOfLetterOccuringInAnswer >
  ) {
    return "bg-yellow-300";

  return "bg-gray-300";

const Guesses: React.FC<GuessesProps> = ({ guesses, answer }) => {
  return (
    <ol className="m-4">
      {, guessIndex) => (
        <li key={guessIndex} className="grid grid-cols-5">
          {guess.split("").map((letter, letterIndex) => (
              )} h-12 w-12 text-2xl flex border-2 border-gray-300 p-1 m-1 box-border justify-center items-center`}

export default Guesses;

Game Over

The ./components/gameOver.tsx component is responsible for displaying the results to the player.

Notice the ./components/guesses.tsx re-use in here versus ./pages/index.tsx. This is enabled by passing in the children prop value and rendering it.

import Guesses from "./guesses";
import Link from "next/link";

export interface GameOverProps {
  answer: string;
  guesses: string[];

const GameOver: React.FC<GameOverProps> = ({ answer, guesses, children }) => {
  return (
    <div className="grid place-items-center">
      <div className="text-center">
        <h1 className="text-4xl font-bold">{children}</h1>
          The answer was <span className="font-bold">{answer}</span>
        <Guesses guesses={guesses} answer={answer} />
        <Link href="/">
          <a className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
            Play Again

export default GameOver;


If you made it this far, chances are you are really close to having your own Wordle clone! Don't forget to push it to so you can share it with your friends :)

If you found this useful, please like and share. Also, follow me at