Getting Started With tailwindcss from Scratch.

What You Would Need (Prerequisites)

VS Code with the Live Server Extension by Ritwick Dey Installed.
npm Installed.
A basic understanding of html, CSS and JS.

Setting Up Folder Structure And Installing tailwindcss.

Create a folder to store your website files. I've named mine WorkingSkeletonTailwind.
Create a src folder in the WorkingSkeletonTailwind folder.
Create a dist folder in the WorkingSkeletonTailwind folder. The dist folder would contain an output css file that tailwind builds from your css and other template files.
Open VS Code,
- Click on File in the toolbar.
- Click Open Folder and locate the folder you created WorkingSkeletonTailwind.
Open terminal ( Ctrl + Shift + ' ).
```
> npm install -D tailwindcss
> npx tailwindcss init
```
Enter the commands above to install tailwindcss using npm.

```
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
 extend: {},
},
plugins: [],
}
```
Create a file tailwind.config.js in the root folder and add the code above. The tailwind.config.js file is where you enter your tailwind configurations and the above code adds the paths to your template files.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Create an index.css file in the src folder and add the directives above to the file.
```
> npx tailwindcss -i ./src/index.css -o ./dist/tailwind.css --watch
```
In the terminal enter the command above to scan our template files and start building the output css file tailwind.css. The command would create tailwind.css file in the dist folder.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/tailwind.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
</body>
</html>

We can now use the tailwind.css file in our html. Create an index.html file in src folder and add the html above. You would notice that the h1 tag above uses tailwindcss classes.

Click Go Live at the bottom of VS Code to view the result using Live Server.
Add main.js file to src folder and add it to your html as shown in the code below

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/tailwind.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

  <script src="/src/main.js"></script>

</body>
</html>

Marvin Botchway's

Marvin Botchway's

Getting Started With tailwindcss from Scratch.

Creating a website project folder and installing tailwindcss.

Table of contents

What You Would Need (Prerequisites)

Setting Up Folder Structure And Installing tailwindcss.