Ostad Tailwind Project

Step 1: Setting Up a New Project

Create a New Directory for Your Project First, create a directory where you want your project to reside. ```js mkdir my-tailwind-project cd my-tailwind-project


2. Initialize a New Node.js Project
Run the following command to initialize a new Node.js project (this will create a package.json file).

```js
npm init -y

Install Tailwind CSS via npm Install Tailwind CSS, PostCSS, and Autoprefixer as development dependencies. ```js npm install tailwindcss postcss autoprefixer

4. Create a tailwind.config.js File
To configure Tailwind, run the following command to generate the tailwind.config.js file.

```js
npx tailwindcss init

This will create a file tailwind.config.js in your project folder. It will look like this by default:

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

Create a postcss.config.js File You also need to create a PostCSS configuration file. Create a postcss.config.js in the root of your project with the following content: ```js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };

```

Top categories