Tailwindcss Setup

Install tailwindcss via npm

$npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npm-install reference (https://docs.npmjs.com/cli/v7/commands/npm-install)

If you want to use the post-css plugin, create a postcss.config.js file

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Create your tailwind.config.js configuration

$npx tailwindcss init

Set purge options

purge: {
    enabled: (process.env.NODE_ENV === 'production'),
    content: ['./*.html'],
  },
  ...

Create your package.json if not exists (for your IDE run scripts)

$npm init -y

Add your run scriptsfor the IDE configuration in package.json depending on your node packages, f.e.

...
"scripts": {
    "tailwind-build": "tailwind build -i css/style.css -o css/package.css",
    "tailwind-npx": "npx tailwindcss -o css/package.css",
    "post-css": "postcss css/style.css -o css/package.css"
  },
...

Dont forget to set your environment variables in your run script configuration "NODE_ENV = production"

Include tailwind in your less / css

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

body {
  .btn {
  @apply mt-4 py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
  }

  p {
    &.debug {
      color: red;
    }
  }
}

Run tailwind-build with your environment variable