Sinisterly
Tutorial Setting up Tailwind CSS - Printable Version

+- Sinisterly (https://sinister.ly)
+-- Forum: Design (https://sinister.ly/Forum-Design)
+--- Forum: Tutorials (https://sinister.ly/Forum-Tutorials--78)
+--- Thread: Tutorial Setting up Tailwind CSS (/Thread-Tutorial-Setting-up-Tailwind-CSS)

Setting up Tailwind CSS - sunjester - 06-02-2022

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.

Code:
npm i -D tailwindcss && npx tailwindcss init

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:

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.css

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.

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:

[Image: Screenshot-2022-05-31-3-42-17-PM.png]

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).

[Image: 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.

Code:
npx tailwindcss -i input.css -o output.css -w

Now, you can go build beautiful websites.

RE: Setting up Tailwind CSS - Edisss - 06-28-2022

This helped me a bit Biggrin May it help others as well Smile

RE: Setting up Tailwind CSS - feihongjr - 11-27-2022

You're a boss! Thank you so much precisely what I was looking for.

RE: Setting up Tailwind CSS - 0e365s10w5 - 02-12-2023

thanks for sharing this my friend <3

RE: Setting up Tailwind CSS - eariel - 11-29-2023

thanks sunjester very cooliousis