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.0.0",
  "private": true,
  "dependencies": {
    "autoprefixer": "9.6.1",
    "postcss-cli": "6.1.3",
    "tailwindcss": "1.1.2"
  },
  "scripts": {
    "start:css": "postcss index.css -o tailwind.css -w",
    "build:css": "postcss index.css -o tailwind.css --env production",
    "build:tailwind": "tailwind build src/styles/index.css -o src/styles/tailwind.css"
  }
}
```
The first script is for compiling the css in an interactive mode. This means that it will open a server that will watch for all css changes. The second one is for compiling the css directly without opening a server. The commands are quite equivalent with the difference that the first one will open the server and will watch for all css changes, i.e. if you add one more class inside your application, that class with it's css will be added to the tailwing.css file.
The last script is for compiling the whole tailwindcss (which is 6-7MB large).
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 postcss.config.js file:
- Windows command:
```
echo "" > postcss.config.js
```
- Mac/Linux command:
```
touch postcss.config.js
```

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

//postcss.config.js
const tailwindcss = require("tailwindcss");
module.exports = {
  plugins: [
    tailwindcss("./tailwind.config.js"),
    require("autoprefixer"),
    require("@fullhuman/postcss-purgecss")({
      // 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: [],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  ]
};

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:

module.exports = {
  variants: [
    "responsive",
    "group-hover",
    "focus-within",
    "first",
    "last",
    "odd",
    "even",
    "hover",
    "focus",
    "active",
    "visited",
    "disabled"
  ]
};

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.
The only problem with this file, is that it has 7.2 MB, which is quite huge.
We recommend you to use this file as is, just in development mode, when you are ready to deploy/publish/host/etc. your project, you should delete the unused css from it.
So, you should run the following command:
```
npm run build:css
```
Or you can run from the start:
```
npm run start:css
```