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: {
          "current": "current",
          "transparent": "transparent",
      variants: [
      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.