Install Tailwind CSS +Fixes for Common Errors (Ubuntu LTS 20)

After hours of frustration and battling with Node.js and Tailwind CSS, I decided to create a guide on how to install Tailwind CSS with Ubuntu LTS 20 (Focal Fossa).

It should apply for any version of Ubuntu but my OS is Ubuntu LTS 20 Focal Fossa

This guide assumes you have some knowledge of Ubuntu and terminal commands. It is possible to follow along using the terminal from VSCode but requirements might be a little different for Windows users.

Update Packages

If this is your first run with Ubuntu (like it was for me), you might have to do some initial updates and software upgrades to ensure everything is up to date.

sudo apt update

Install Curl

This is optional but curl wasn't installed for me. If you get any errors when running curl commands, return to this section.

sudo apt install curl

Install the Latest Version of Node.js

sudo apt install nodejs

Install NVM + Preferred Version of Node.js

NVM stands for Node Version Manager and if you work on a lot of different projects that require specific versions of Node.js, you are going to love nvm.

# Install nvm via script & update the shell
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash && source ~/.profile

# Verify that you have nvm installed.
# If installed, it will output a version number.
nvm --version

# This command lists available versions
nvm ls-remote

# We'll install Nodejs v12.13.0 (which is required for Tailwind CSS)
nvm install 12.13.0

# Verify that you have the correct version.
# If all steps were done correctly, it should show: v12.13.0
node -v

Installing Tailwind CSS

Create a Project Directory

mkdir my-project && cd my-project

Generate a Package.JSON File

## To configure the settings:
npm init

## For Automatic Generation
npm init -y

Install Tailwind, PostCSS-Cli & Autoprefixer

npm install tailwindcss postcss-cli autoprefixer

Generate a Tailwind Configuration File

npx tailwind init

Create a PostCSS Configuration File

touch postcss.config.js

## Inside of postcss.config.js, add:

module.exports= {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

Create a CSS File + Include Tailwind

## Create a css file (location: anywhere in the root of your project)
mkdir css && cd css && touch tailwind.css

## Add the following inside of tailwind.css

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

Create a Build Script

## Inside your package.json file, modiy the test script from
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
## to:
 "scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
  },

Initial Build for Tailwind CSS

Here is where things typically went wrong for me.

npm run build

Common Errors

Node.js-related errors: You need to install the correct version.

You might see something like:
wanted:ver. 12.13.0

PostCSS-related errors:

Error: true is not a PostCSS plugin
    at Processor.normalize (/home/user/my-project/node_modules/postcss/lib/processor.js:168:15)

For this error, you might have fogotten to actually install PostCSS

npm install postcss

I hope this guide was useful to anyone that is not a developer and was strugglig the way I was.