> For the complete documentation index, see [llms.txt](https://www.mohitkapadiya.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.mohitkapadiya.com/frontend/tailwind-css-and-shadcn-and-chart-js.md).

# Tailwind CSS & Shadcn & Chart JS

**Tailwind CSS:**

**Overview:** Tailwind CSS is a utility-first CSS framework that allows for rapid design and customization without having to leave your HTML. Its utility classes enable you to build custom designs directly in your markup.

**Key Features and Skills:**

* **Utility-First Approach:** Utilized utility classes for designing custom interfaces without writing custom CSS.

  ```html
  <div class="bg-blue-500 text-white p-4 rounded-lg shadow-lg">
    <h1 class="text-2xl font-bold">Welcome to Tailwind CSS</h1>
    <p class="mt-2">Tailwind CSS is a utility-first CSS framework for rapid UI development.</p>
  </div>
  ```
* **Responsive Design:** Leveraged Tailwind’s responsive utilities to create adaptive layouts.

  ```html
  <div class="bg-gray-100 p-4 md:p-6 lg:p-8">
    <h1 class="text-lg md:text-xl lg:text-2xl">Responsive Design with Tailwind</h1>
  </div>
  ```
* **Custom Theming:** Configured Tailwind’s configuration file to define custom themes, colors, and breakpoints.

  ```javascript
  module.exports = {
    theme: {
      extend: {
        colors: {
          primary: '#3490dc',
          secondary: '#ffed4a',
        },
      },
    },
  };
  ```
* **Component Libraries:** Integrated Tailwind with component libraries like Tailwind UI for pre-designed components.

  ```html
  <button class="btn btn-blue">Click Me</button>
  ```

**Shadcn:**

**Overview:** Shadcn is a design system and component library built on top of Tailwind CSS, aimed at providing a set of customizable and reusable components for building modern UIs.

**Key Features and Skills:**

* **Pre-Built Components:** Implemented Shadcn’s pre-built components to speed up development and maintain consistency.

  ```html
  <Button variant="primary">Submit</Button>
  ```
* **Customization:** Customized Shadcn components using Tailwind’s utility classes to match branding requirements.

  ```html
  <Card className="bg-white shadow-lg p-6 rounded-lg">
    <h2 className="text-xl font-semibold">Custom Card</h2>
    <p className="mt-2">This card is styled with Tailwind utilities and Shadcn components.</p>
  </Card>
  ```
* **Design System Integration:** Used Shadcn’s design tokens and patterns to maintain a consistent design language across projects.

  ```javascript
  const theme = {
    colors: {
      primary: '#ff5722',
      secondary: '#795548',
    },
  };
  ```

**Chart.js:**

**Overview:** Chart.js is a flexible and easy-to-use JavaScript library for creating interactive charts and graphs. It supports various chart types and customization options.

**Key Features and Skills:**

* **Chart Creation:** Created interactive charts to visualize data effectively.

  ```html
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <canvas id="myChart" width="400" height="200"></canvas>

  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)',
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)',
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
  ```
* **Custom Chart Types:** Developed custom chart types and interactive features based on project requirements.

  ```javascript
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'Monthly Sales',
        data: [65, 59, 80, 81, 56, 55, 40],
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 2,
        fill: false
      }]
    },
    options: {
      responsive: true,
      scales: {
        x: {
          title: {
            display: true,
            text: 'Month'
          }
        },
        y: {
          title: {
            display: true,
            text: 'Sales'
          }
        }
      }
    }
  });
  ```
* **Integration with React:** Integrated Chart.js with React to create interactive and dynamic data visualizations in React applications.

  ```javascript
  import { Chart } from 'react-chartjs-2';

  const LineChart = ({ data }) => (
    <Chart
      type="line"
      data={data}
      options={{
        scales: {
          x: { title: { display: true, text: 'Month' } },
          y: { title: { display: true, text: 'Sales' } }
        }
      }}
    />
  );
  ```