/Tailwind-CSS

In this Repository You should be able to find some awesome Tailwind CSS components like Navbars, Landing Pages, Portfolio Designs, Footers and many more section related to frontend design by using Tailwind CSS.

Primary LanguageHTML

How to Use Tailwind CSS

This Repository contain some Awesome Tailwind CSS component that u can able to use directly for your Web

☣ Read the below information very carefully

Tailwind-CSS is the farmwork of css that was free to use and by using TailWind we can able to create some aswesome web page

◉ There are many version able in the Tailwind site: https://tailwindcss.com/docs/installation

◉ You can access Tailwind CSS version 2.O by just pasting this embeded link under the head tag like this:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <!--  Just appy this link to access the Tailwind CSS -->
    <title>Nav1</title>
</head>
<body class="bg-gray-900">
    
</body>
</html>

◉ To access the Latest version of the Tailwind CSS just follow the Boilerplate that u can able to see in the Repository or just can use the below link:

How to setup Tailwind 3.O in the file

  1. First install node js in the system.

  2. visit the site of tailwind css installation page ==> npm install -D tailwindcss postcss autoprefixer -> give this command in the cmd terminal

==> npx tailwindcss init -> then give the command. This will open the tailwind.config.js file

==> int the tailwind.config.js file change the content[] -> ' content["*"] ', then close the file

  1. add the <script src="https://cdn.tailwindcss.com"></script> in the head of the html

  2. the give the command ==> npm install vite

  3. give the command ==> npm init (it will create the package.json file)

  4. go to package.json file and add the

"scripts": {
    "start": "vite"
  },
  1. then give the command ==> npm run start (it will run the vite and then vite will give you some instructions just follow that so you can run it through port)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script> <!-- Applying this Script is very inportant -->
    <title>Boilerplate</title>
</head>
<body>
  
</body>
</html>

🔗 Links

Linkedin Instagram CodePen