Build a Complete Website from Scratch with Tailwind & TailGrids

Hello everyone, today we are going to build a complete website with Tailwind CSS and + Tailgrids.
TailGrids is a Tailwind CSS component library which makes the process of building websites super fast and easy.

Today we are going to build a website from scratch using Tailwind & TailGrids.
So, let’s get started.

If you prefer video content, check this out

#1: Setup a Tailwind Project

1: Install tailwind and create init file

To build a project with Tailwind, you must first install it and crate tailwind css config file. Run the following commands to install:

npm install -D tailwindcss
npx tailwindcss init

2: Configure your template paths

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3: Add the Tailwind directives to your CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

4: Start the Tailwind CLI build process

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

The build command is too long. So, for simplicity let’s add it to package.json file as a script.

"dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"

Now, whenever you want to start the project just run:

npm run dev

It’ll start the build command easily.

5: Include the output.css file in html

Create an Index.html file in the dist. Then include the output.css file to it.

Note: you name anything you like it doesn’t have to be output.css

#2: Setup TailGrids

So, we got Tailwind setup done. Now, we need to get TailGrids.
To get the access to TailGrids All you have to do is purchage the Library. It has three plans, go ahead and get the one you need.

#3: Build the website

All the setup is done!
Now, let’s build the site. To build the site all you have to do is, go to TailGrids site and go to components tab. And then choos the components you like to add to your website.

Copy the code and then customize the contents and the images.

That’s it that’s how you can build a website super fast using Tailwind CSS and TailGrids.

Here’s a site I built from scratch using Tailwind CSS and TailGrids.

Link:

Conclusion

In this article I showed you how to build a website from scratch using Tailwind Css and TailGrids.

Hope you enjoyed this short article. If you want to see more articles or tutorials like this follow me.

YouTube: coderamrin

Twitter: https://twitter.com/CoderAmrin