Setup Tailwindcss CLI for html

Here are the steps I used to create a basic Tailwaind setup:

1. In VS Code open a new terminal and navigate to the wherever you want to create your project on your computer (here is a good overview of terminal commands: “17 Terminal Commands Every Programmer Should Know.”
2. Create a new folder using the mkdir command: “mkdir ExampleTailwind” <enter>
3. Navigate terminal into that folder: “cd ExampleTailwind” (Having trouble? On a mac, type “cd” and leave a space after cd. Then select the folder in Finder and drag it to the terminal window. It will automatically insert the full path to that folder in terminal. source)
4. Create another folder where your source files, like index.html, will go. In terminal: “mkdir src” to name that folder “src”
5. Navigate into that new folder: “cd src”
6. Create an index.html file via terminal: “touch index.html” — open it in VS Code and type “doc” and then <tab> and it should create basic html document text for you (if not, look for an extension that does this — I’m not sure which one it is)
7. From terminal, create your main css file: “touch input.css” (use whatever name you prefer, but using input.css as your css filename makes the next steps a tiny bit easier)
8. Navigate up one level in terminal by typing “cd ..” (you should now be back in your ExampleTailwind folder from step 2)
9. From terminal, type “code .” (space after the ‘e’) to open a VS Code workspace (not sure this is the right term) in the folder you just created. If “code .” isn’t working for you, this StackOverflow comment might help mac users.
10. Open TailwindCSS’s Installation Instructions (I’ll use “TWII” as shorthand for this document) at https://tailwindcss.com/docs/installation (we’re going to use “CLI”)
11. First TWII step: Install Tailwind CSS and Install tailwindcss via npm, and create your tailwind.config.js file by typing or pasting

#11 above

npm install -D tailwindcss
npx tailwindcss init

12. Second TWII step: Configure your template paths Add the paths to all of your template files in your tailwind.config.js file. I needed help on this and found this to be helpful: “Configuring the content sources for your project” — https://tailwindcss.com/docs/content-configuration

#12 above

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

I’m NOT an expert, but for this simple html, css and js example, I set content to:

content: [
"./src/index.html",
"./src/*.html",
"./src/*.js",
"./src/**/*.{html,js}",
],

#12 above

13. Third TWII step: Add the Tailwind directives to your CSS Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

#13 above

@tailwind base;
@tailwind components;
@tailwind utilities;

14. Fourth TWII step: Start the Tailwind CLI build process Run the CLI tool to scan your template files for classes and build your CSS.

NOTE: Instead of just pasting the code from this step into terminal, I adjusted it as follows:

The original code is:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

See the “/dist” part? That creates a new folder on your ExampleTailwind folder called “dist” and places your “output.css” folder there.

Instead, I changed “dist” to “src” so the output.css is in the same folder as my index.html (you might prefer to create a css folder inside src, which is perfectly fine).

Also, see the “/src/input.css” in that line of original code? If you created your css file as “input.css” you don’t need to change that. But, it’s easy enough either way.

So now, what I’m going to enter into terminal is:

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

***NOTE: I’m not sure why, but if I copy-paste the code immediately above and get an error, go to step 4 of the Tailwindcss installation instructions at https://tailwindcss.com/docs/installation and copy “npx tailwindcss -i ./src/input.css -o ./src/output.css — watch” directly from there, then paste that into teh web page address bar and replace “dist” with “src”then copy that and paste it into terminal, it works just fine. I had this problem until I pasted thw code above into a code block (gray box) using this article’s 2nd solution: (embed directly with either three backticks ``` or Mac : command+option+6 / Windows : ctrl+alt+6 / Linux : ctrl+alt+6 and a gray code box appears in which you can paste or type the code)

***ANOTHER NOTE: If your “output.css” file stops updating, it’s fine to repeat the steps in this step #14. When I do that, I start seeing the “rebuilding” update in terminal, like this:

15. Fifth TWII step: Start using Tailwind in your HTML Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.

#15 above

Below you’ll see

<link rel="stylesheet" href="output.css" />

to reference the “output.css” (or whatever you named yours in step 14 above) stylesheet that’s generated by tailwind:

#15 above (probably do not need to ref input.css)

16. (optional) When you’re ready to deploy your site, minify your css, so the file is smaller and loads faster:

Base on these Tailwind docs, paste this in terminal to minify your output.css file into output.min.css in your /src folder:

npx tailwindcss -o src/output.min.css — minify

If you do this, make sure to point all pages to the css in the minified file:

<link rel=”stylesheet” href=”output.min.css” />

Or,

• open your “output.css” file
• copy the entire contents
• go to a site that minifies code, such as https://refresh-sf.com/

https://refresh-sf.com/

• paste your css in and click the “CSS” button on the top-right

minified CSS

• Above is the minified CSS, which you can download as a file by clicking the blue “Save” button at the top-right (consider naming it the same as your output.css file, but with “.min” in the middle, so the filename would be “output.min.css” (save it to the same location as your “output.css”)
• Change your reference from step 15 to the new filename:

<link rel=”stylesheet” href=”output.min.css” />

• I just commented-out the line referring to output.css and added a new one for output.min.css, so when I’m working on changes I can refer to the style sheet being constantly updated by Tailwind.

That’s it!

My latest projects: Zagnetic.com, Uberweek.com and Careerasaurus.com

BONUS CONTENT

Official Plugins

https://tailwindcss.com/docs/plugins#official-plugins

• Typography
• Forms
• Line-clamp
• Aspect ratio

npm install -D @tailwindcss/typography
npm install -D @tailwindcss/forms
npm install -D @tailwindcss/line-clamp
npm install -D @tailwindcss/aspect-ratio

plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
  ]

Automatic Class Sorting with Prettier

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

Tailwind Colors:

https://tailwindcss.com/docs/customizing-colors