]
06-02-2022, 12:57 AM
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
First, Install and initialize tailwind using npm and npx. If you don't have them installed you can follow the
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.
[To see links please register 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
[To see links please register here]
.Hidden Content
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:
Hidden Content
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.
Hidden Content
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.
Hidden Content
Now we can process the CSS file into a final output CSS file using npx.
Hidden Content
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.
Hidden Content
Next, create a new file named index.html and add the following to it:
Hidden Content
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.
Hidden Content
Now, you can go build beautiful websites.
