Documentation
Installation and Usage
Alternative Way

Alternative Way (Pro User 💎): If you've purchased the premium version of TailGrids, there is another way to install and directly access the component code. Learn more about this alternative.

Alternative Way

If you've purchased the pro version (opens in a new tab) of TailGrids, there is another way to install and directly access the component code.

This installation method, specifically for premium TailGrids users, offers direct access to components and maximizes customization potential.

If you have a TailGrids Premium (opens in a new tab) account, you can follow these steps for installation:

Step #1: Login and Download

  • Access your TailGrids account and navigate to the "Downloads (opens in a new tab)" section
  • After that, Download the Components file. You’ll get a zip file, so unzip/extract it.

After extracting the components package, you will get a file structure like the one below.

Directory Structure

Main Folder
  |-- assets
  |     |-- css
  |           |-- All CSS files
  |     |-- images
  |           |-- All Images
  |
  |-- node_modules
  |     |-- All packages needed
  |
  |-- src
  |     |-- tailwind.css (this file is editable)
  |
  |-- All HTML Files
  |
  |-- All Config files

The extracted folder includes the following:

  • /assets: Contains core CSS files, images, and scripts.
  • /src: include editable Tailwind CSS configuration files.
  • Individual HTML component files.
  • Configuration files (like package.json or tailwind.config.js).

Step #2: Open the Terminal/Command line inside the extracted folder, then run this command:

npm install

This command will install all the dependencies you’ll need to build websites with TailGrids components.

Step #3: Include the compiled CSS file from the assets folder.

Open up the project folder in your code editor and create an HTML file called Index.html.

Add this line of code to the Index.html file to link the CSS:

<link rel="stylesheet" href="./assets/css/tailwind.css" />

That’s it. Now, you can run the local server and open the index.html to browse and preview components.

Using TailGrids UI Components

  • Copy and Paste: Browse the individual HTML component files and copy the desired component's code directly into your project.
  • Customization: Utilize Tailwind CSS utility classes (opens in a new tab) to change the appearance of components to fit your specific needs.

Using TailGrids UI Components with Tailwind CSS

Additional Notes

  • Figma Access: If your premium plan includes Figma files, use them for extensive prototyping and design adjustments.

Now, Start building with TailGrids components!

Using CDNComponents