Design a Tic Tac Toe Game in Tailwind CSS

Last Updated : 26 Apr, 2025

The Tic-tac-toe game is a classic two-player game where players take turns marking spaces in a 3x3 grid with their respective symbols. The objective of the game is to get three of one's symbols in a row, column, or diagonal. This project aims to implement a simple Tic-tac-toe game using HTML, Tailwind CSS, and JavaScript.

Approach:

Create a folder with the name of the project and two files inside it for HTML and JavaScript.
In the HTML file, use the HTML elements like <div>, <span>, heading etc to create the structure of the website.
Now, include Tailwind CSS using the CDN link and style your web page using its classes.
Implement JavaScript to check for the filled places and announce the winner according to that or output draw in case of a draw.

Example: The below code will explain how you can create a tic-tac-toe game using Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        The Tic Tac Toe
    </title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
    <style>
        .square {
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 2em;
        }
    </style>
</head>

<body class="bg-gray-400 h-screen flex 
    justify-center items-center">
    <div class="bg-white p-8 rounded-lg 
        shadow-md max-w-md w-full">
        <h1 class="text-3xl font-bold mb-3 text-center">
            Tic Tac Toe
        </h1>
        <h3 class="text-1xl font-bold mb-3 text-center">
            X will start first.
        </h3>
        <div class="grid grid-cols-3 gap-4 text-center">
            <div class="square bg-gray-200" 
                onclick="handleClick(0)" id="0"></div>
            <div class="square bg-gray-200" 
                onclick="handleClick(1)" id="1"></div>
            <div class="square bg-gray-200" 
                onclick="handleClick(2)" id="2"></div>
            <div class="square bg-gray-200" 
                onclick="handleClick(3)" id="3"></div>
            <div class="square bg-gray-200" 
                onclick="handleClick(4)" id="4"></div>
            <div class="square bg-gray-200" 
                onclick="handleClick(5)" id="5"></div>
            <div class="square bg-gray-200" 
                onclick="handleClick(6)" id="6"></div>
            <div class="square bg-gray-200" 
                onclick="handleClick(7)" id="7"></div>
            <div class="square bg-gray-200" 
                onclick="handleClick(8)" id="8"></div>
        </div>
        <div id="status" class="mt-6 text-gray-900 
            text-center"></div>
        <div class="flex justify-center mt-4">
            <button onclick="restartGame()"
                class="bg-blue-500 text-white py-2 px-4 rounded-md 
                hover:bg-blue-600 focus:outline-none focus:ring-2 
                focus:ring-blue-600 focus:ring-offset-2 transition 
                duration-300 ease-in-out transform hover:scale-105">
                Restart
            </button>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

JavaScript

// script.js

let currentPlayer = 'X';
let board = 
    ['', '', '', '', '', 
    '', '', '', ''];
let gameActive = true;
const winningConditions = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];
function handleClick(index) {
    if (gameActive && board[index] === '') {
        board[index] = currentPlayer;
        document.getElementById(index).
            innerText = currentPlayer;
        checkWinner();
        togglePlayer();
    }
}
function checkWinner() {
    for (let i = 0; i < winningConditions.length; i++) {
        const [a, b, c] = winningConditions[i];
        if (board[a] && board[a] === board[b] && 
            board[a] === board[c]) {
            gameActive = false;
            document.getElementById('status').
                innerText = `${currentPlayer} wins!`;
            return;
        }
    }
    if (!board.includes('')) {
        gameActive = false;
        document.getElementById('status').
            innerText = "It's a draw!";
    }
}
function togglePlayer() {
    currentPlayer = currentPlayer === 
        'X' ? 'O' : 'X';
}
function restartGame() {
    currentPlayer = 'X';
    board = ['', '', '', '', '', 
            '', '', '', ''];
    gameActive = true;
    document.getElementById('status').innerText = '';
    for (let i = 0; i < 9; i++) {
        document.getElementById(i).innerText = '';
    }
}