Quick Start
In this section, we are going to show you two ways you can use the components. The first one is the recommended method, and it’s the easiest one. And the other one is the alternative method. You can use both depending on project type or requirements.
Installation and Usage
In this part, we are going to show you how to set up a TailGrids project from scratch.
We first will set up a Tailwind CSS project then we will include TailGrids in it.
Here are the steps you can follow to do that:
Step#1: Install Tailwind and generate the config file.
npm install -D tailwindcss
npx tailwindcss init
Step#2: Install TailGrids
npm i tailgrids
Step#3: Update the tailwind.config.js file with TailGrids config.
module.exports = {
content: ["./*.html", "./ecommerce/*.html", "./assets/**/*.js"],
theme: {},
variants: {
extend: {},
},
plugins: [require("tailgrids/plugin")],
};
Step#4: Add Tailwind CSS directives to your CSS.
Create a CSS file named input.css in the root of your project or the src directory. Then include this code at the top of the file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Step#5: Generate the CSS file with the build command.
To do that first we will have to add the script to the package.json file. Make sure you’ve provided the correct path of the input.css file. if it’s in the root keep the script as is, if it’s under the src include that before the slash.
"scripts": {
"build": "npx tailwindcss -i ./input.css -o ./dist/output.css --watch"
},
Then we will have to run the build command:
npm run build
Step#6: Include the compiled CSS file in the Html file. We’ve compiled the file in the dist folder.
<link href="/dist/output.css" rel="stylesheet">
Now you can just copy and paste the components from TailGrids and build websites.
Complete Video Tutorial on Installing TailGrids
Alternative Way
You can follow this method if you have a Premium account.
Here are the steps you need to follow:
Step#1: Login into your TailGrids account, then go to Downloads from the Account Menu (top right) or hit this link
Step#2: After that Download the Components file. You’ll get a zip file, so unzip/extract it.
Directory Structure
After downloading the components package you will get a zip file structure will be like below after you unzip.
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
Step#3: 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#4: 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 copy and paste the components to build the websites you want to build.