---
title: "Tailwind | Docs"
description: "ZingGrid integrates seamlessly with Tailwind, allowing you to easily style your grid."
url: https://www.zinggrid.com/docs/integrations/css-&-design-systems/tailwind-css
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/integrations/css-&-design-systems/tailwind-css.md
mode: provenance
representation: markdown
origin_response_id: 3ab2dfc52db297b5be8488d36a96b305
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.726Z
version_nonce: 7e9bd8ba4e9ad6a7b9504c78fd0f22ba
generated_at_utc: 2026-11-08T03:04:56.382Z
response_nonce: 0b3e4dace7e8a3a92687f3c5514d5ff3
```

# Using Tailwind with ZingGrid

Quickly add data tables to your Tailwind application with ZingGrid.

[Example code](https://app.zingsoft.com/demos/embed/RIE964YK)

## Usage

1. Include ZingGrid in your site along with Tailwind CSS and JS.
```html
<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
```

Note: Per Tailwind documentation, it is recommended to install Tailwind using NPM rather than through using the CDN. The CDN link does not allow you to use all of Tailwind's features.

2. Include the ZingGrid markup on your page, and add Tailwind classes as desired!
```html
 <zing-grid class="text-gray-700"
    sort
    zebra>
    <zg-caption class="text-2xl bg-gray-200 text-gray-900 font-semibold leading-tight">Tailwind Styled Grid</zg-caption>
    <zg-head class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider"></zg-head>
    <zg-data data='[
      { "first": "Maria", "last": "John", "number": 123 },
      { "first": "David", "last": "Smith", "number": 456 },
      { "first": "Felicity", "last": "Snow", "number": 789 }
      ]'>
    </zg-data>
    <zg-source class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">SOURCE: zinggrid.com</zg-source>
  </zing-grid>
```

3. Add any additional CSS styling using ZingGrid's CSS variables
```css
zing-grid {
  --theme-color-primary: #1f2937; /* gray-800 */
  --theme-color-secondary: #1f2937; /* gray-800 */
  --zg-input-background: #e5e7eb; /*gray-200*/
  --zg-control-bar-background: #e5e7eb;  /*gray-200*/
  --zg-head-cell-background: #f3f4f6; /*gray-100*/
  --zg-button-background_hover: #1f2937; /* gray-800 */
  --zg-caption-button-background_hover: #1f2937; /* gray-800 */
}
```