Wordle Game

About The Build

Wordle Game is one which fetches the words data from a json file - data.json and has Slick Animations, Eye-Catching UI. However, the on-Screen keyboard working functionality is yet to be implemented.

Vite + React.js + Tailwind CSS

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

How To Start

Install Vite and create React project

Execute vite with npm or Yarn to bootstrap the example:

npm init vite@latest
# or
yarn create vite

Then follow the prompts and make your choices. Now execute the following commands:

cd my-project

npm install

Install and setup Tailwind CSS

To install tailwindcss and its peer dependencies via npm, and create your tailwind.config.js file, execute the following commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Add Tailwind to your PostCSS configuration

Add tailwindcss and autoprefixer to your postcss.config.js file, or wherever PostCSS is configured in your project.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Configure your Template paths

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

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your main CSS main.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Now finally run your Project

Run your build process with npm run devor whatever command is configured in your package.json file.

npm run dev