Build Tools

Follow the bellow steps to compile your own version of Tailwindcss to our specs.

First of all, be sure to install NodeJS and npm globally (LTS version).
Create a new folder:
```
mkdir tailwindcss-project
```
CD into the new folder:
```
cd tailwindcss-project
```
Create a package.json file:
- Windows command:
```
echo "" > package.json
```
- Mac/Linux command:
```
touch package.json
```

Copy the following inside your new package.json:

{
  "name": "tailwindcss-project",
  "version": "1.1.0",
  "private": true,
  "dependencies": {
    "autoprefixer": "10.2.5",
    "postcss": "8.2.8",
    "tailwindcss": "2.0.4"
  },
  "devDependencies": {
    "@tailwindcss/forms": "0.2.1"
  }
  "scripts": {
    "build:tailwind": "NODE_ENV=production tailwind build index.css -o tailwind.css"
  }
}

We will use the build:tailwind script for compiling Tailwind CSS.
Also, a small note would be that you should change index.css and tailwind.css to your own path where these two files are found, for example path/to/index.css and path/to/tailwind.css.

Create a tailwind.config.js file:
- Windows command:
```
echo "" > tailwind.config.js
```
- Mac/Linux command:
```
touch tailwind.config.js
```

Copy the following inside your new tailwind.config.js:

const colors = require("tailwindcss/colors");

module.exports = {
  purge: {
    enabled: false,
    // in the content prop you should put all the files
    // that are using tailwindcss classes, for example:
    // content: ["./src/**/*.js", "./public/index.html"],
    // or
    // content: ["./src/**/*.vue", "./public/index.html"],
    // or
    // content: ["./src/**/*.jsx", "./public/index.html"],
    content: [],
    options: {
      safelist: [],
    },
  },
  theme: {
    colors: {
      ...colors,
      "current": "current",
      "transparent": "transparent",
    },
  },
  variants: [
    "responsive",
    "group-hover",
    "focus-within",
    "first",
    "last",
    "odd",
    "even",
    "hover",
    "focus",
    "active",
    "visited",
    "disabled",
  ],
  plugins: [require("@tailwindcss/forms")],
};

Create an index.css file:
- Windows command:
```
echo "" > index.css
```
- Mac/Linux command:
```
touch index.css
```

Copy the following inside your new index.css file:

@tailwind base;

@tailwind components;

@tailwind utilities;

Run inside your terminal:
```
npm install
```
Then run:
```
npm run build:tailwind
```
After that, you will see that inside your tailwindcss-project folder, a new tailwind.css file has been created. You will only need to import/include that file inside your project.