Setting up Tailwind CSS 06-02-2022, 03:57 AM
#1
Tailwind CSS is a pre-processor for CSS files. It takes an input, processes it, and give us the output. Tailwind's built-in library of classes and colors makes it very easy to create quality web sites that look and feel good. You can find the official documentation here. If you are not familiar with the Tailwind classes then you will spend a lot of time in the docs.
First, Install and initialize tailwind using npm and npx. If you don't have them installed you can follow the officail guide here.
Next, configure the directories where you will keep your files. You will edit the configuration file that was generated from the last command, its called tailwindcss.config.js. The file originally looks like this:
The content section is where you tell tailwind to look for files that use tailwind. In the example below tailwind will look in it's current directory for html and javascript files. It can be very confusing at first but its nothing more than a simple regex. *.{html,js} is telling tailwind to match all files that end with .html or .js. You could specify file names if you want specific files to found and not ALL the files. But, for this tutorial, we want all the HTML files in the current directory.
Next, create a CSS source file that tailwind will use to process into a final output css file. The file below is named input.css.
Now we can process the CSS file into a final output CSS file using npx.
You will have recieved a warning from tailwind since we haven't created an index.html file yet. That's next. The warning is below and you should note that it did in fact create the output file, output.css.
Next, create a new file named index.html and add the following to it:
![[Image: Screenshot-2022-05-31-3-42-17-PM.png]](https://i.ibb.co/VHKyZZ9/Screenshot-2022-05-31-3-42-17-PM.png)
And visit the index.html file on your server or open it in your browser. You should see the words Hello World, and they should be underlined. If not, your css file is not connected properly (its location may be wrong in the HTML file, check the directory and its name).
![[Image: Screenshot-2022-05-31-3-41-53-PM.png]](https://i.ibb.co/XVnNWdM/Screenshot-2022-05-31-3-41-53-PM.png)
The next thing to do is to issue a watch command. This is exactly like before when we created the output.css file except now we add the -w argument to it. This will watch the source files specified in the tailwind.config.js content section for changes. When the files change, tailwind will regenerate the output css file automatically so you don't have to manually generate the output CSS file.
Now, you can go build beautiful websites.
First, Install and initialize tailwind using npm and npx. If you don't have them installed you can follow the officail guide here.
Code:
npm i -D tailwindcss && npx tailwindcss initNext, configure the directories where you will keep your files. You will edit the configuration file that was generated from the last command, its called tailwindcss.config.js. The file originally looks like this:
Code:
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}The content section is where you tell tailwind to look for files that use tailwind. In the example below tailwind will look in it's current directory for html and javascript files. It can be very confusing at first but its nothing more than a simple regex. *.{html,js} is telling tailwind to match all files that end with .html or .js. You could specify file names if you want specific files to found and not ALL the files. But, for this tutorial, we want all the HTML files in the current directory.
Code:
content: [
"./**/*.{html,js}"
],Next, create a CSS source file that tailwind will use to process into a final output css file. The file below is named input.css.
Code:
@tailwind base;
@tailwind components;
@tailwind utilities;Now we can process the CSS file into a final output CSS file using npx.
Code:
npx tailwindcss -i input.css -o output.cssYou will have recieved a warning from tailwind since we haven't created an index.html file yet. That's next. The warning is below and you should note that it did in fact create the output file, output.css.
Code:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
Done in 813ms.Next, create a new file named index.html and add the following to it:
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>And visit the index.html file on your server or open it in your browser. You should see the words Hello World, and they should be underlined. If not, your css file is not connected properly (its location may be wrong in the HTML file, check the directory and its name).
The next thing to do is to issue a watch command. This is exactly like before when we created the output.css file except now we add the -w argument to it. This will watch the source files specified in the tailwind.config.js content section for changes. When the files change, tailwind will regenerate the output css file automatically so you don't have to manually generate the output CSS file.
Code:
npx tailwindcss -i input.css -o output.css -wNow, you can go build beautiful websites.
![[+]](https://sinister.ly/images/modern/collapse_collapsed.png)
May it help others as well 
