Installation (TailBlocks Ext)

Introduction

Tailblocks are the premade ui components made in tailwindcss which you can simply copy and paste to your website and use them.

You will get Tailblocks as React Components in the tailblocks tab, but if you want to use them on your vanillaJS project just copy them and ask ChatGPT to convert them

TailwindCss must be installed in your React/Next project to use Tailblocks

Below given how can you install tailwindcss in your react / next app

Tailwindcss Installation

Create your project

    npx create-react-app my-project
    cd my-project

Install Tailwind CSS

Install tailwindcss via npm, and then run the init command to generate your tailwind.config.js file.

npm install -D tailwindcss
npx tailwindcss init

Configure your template paths

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

/** @type {import('tailwindcss').Config} */
module.exports = {
   content: [ 
       "./src/**/*.{js,jsx,ts,tsx}", 
   ], 
   theme: {
       extend: {},
   },
   plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

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

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content. App.js

export default function App() {
   return (
           <h1 className="text-3xl font-bold underline">
           Hello world!  
           </h1> 
   )
}