1. Next.js and React.js Components

Our Next.js and React.js components are built using Tailwind CSS. These components offer flexibility and customization using utility-first CSS classes. To get started, follow the Tailwind configuration guide byscrolling down.

Make sure you install any necessary dependencies specific to the component you want to use.

2. Static Components

Our static components are based on vanilla CSS. You will find three files: JavaScript, HTML, and CSS. Simply copy and use them in your project, without any additional configuration.

3. Setting Up Tailwind in Your Project

Follow the steps below to configure Tailwind CSS in a React or Next.js project:

Step 1: Initialize Project

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

Step 2: Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Step 3: Configure Tailwind

Add the following to your tailwind.config.js file:

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

Step 4: Add Tailwind to CSS

In your src/index.css or globals.css file, add:

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

Now you can start using Tailwind classes to style your React or Next.js components!