Documentation
Installation and Usage
Using CDN

Using CDN

⚠️

Installing using CDN files is not recommended.

Suppose you want to experiment with TailGrids HTML components without a full project setup. In that case, you can leverage the power of CDN. Here's how:

Step #1: Include the Scripts and Stylesheet

Add the following lines within the <head> tag of your HTML file:

<script src="https://cdn.jsdelivr.net/npm/tailgrids@2.2.2/plugin.min.js"></script>
<link
  href="https://cdn.jsdelivr.net/npm/tailgrids@2.2.2/assets/css/tailwind.min.css"
  rel="stylesheet"
/>

💡 Don’t forget to include Tailwind CSS and Alpine.js CDN URLs in your code.

<head>
  <!-- Your existing codes go here -->
 
  <script src="https://cdn.tailwindcss.com"></script>
  <script
    defer
    src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
  ></script>
 
  <!-- TailGrids CDN -->
 
  <script src="https://cdn.jsdelivr.net/npm/tailgrids@2.1.0/plugin.min.js"></script>
  <link
    href="https://cdn.jsdelivr.net/npm/tailgrids@2.1.0/assets/css/tailwind.min.css"
    rel="stylesheet"
  />
</head>

Step #2. Start Using TailGrids Components

You can copy and paste TailGrids HTML component code snippets into your project.

Important Notes!

  • Limited Functionality: Using the CDN might cause some components (especially those with dark mode support) not to work perfectly.
  • Troubleshooting: Check the official Tailwind CSS Dark Mode (opens in a new tab) documentation for unexpected behavior.
  • Production: CDNs are generally not recommended for production environments.
VueAlternative Way