Get Tailwind CSS up and running quickly on your project.

README.md

Tailwind CSS Quick Start NPM Script

I found myself reading the installation guide and doing the same thing over and over again all the time. So, instead of learning how to use Webpack or Gulp I decided to automate it with something that most people can get their head around, also, no dependencies! Besides Tailwind CSS, obviously.

Sidenote: I'm a Windows user (Sorry Apple, I'm broke) so this probably doesn't work on Linux or Mac but I bet you can find equivalent commands. That said, if you're interested in it I could add it to this gist.

Steps

To get up and running with Tailwind CSS on your project you only have to do 4 things.

1. Run npm init and click enter until it stops asking stuff
2. Copy and paste this into your package.json

"scripts": {
  "pretailwind": "md tailwind tailwind\\css tailwind\\js",
  "tailwind": "npm i tailwindcss -D",
  "posttailwind": "npm run --silent tailwind-config",
  
  "prebuildtailwind-config": "cd node_modules/.bin",
  "tailwind-config": "tailwind init tailwind/js/tailwind.js",
  "posttailwind-config": "npm run --silent tailwind-css",
  
  "pretailwind-css": "echo @tailwind preflight; > tailwind\\css\\styles.css",
  "tailwind-css": "echo @tailwind components; >> tailwind\\css\\styles.css",
  "posttailwind-css": "echo @tailwind utilities; >> tailwind\\css\\styles.css && npm run --silent tailwind-build",
  
  "pretailwind-build": "cd node_modules/.bin",
  "tailwind-build": "tailwind build tailwind/css/styles.css -c tailwind/js/tailwind.js -o tailwind/css/tailwind.css",
  "posttailwind-build": "cd ../.."
}

3. Run npm run --silent tailwind
4. Lastly, add <link rel="stylesheet" href="tailwind/css/tailwind.css"> to the head of your HTML file and that's it.

Pro Tip: --silent is optional but npm echoes too much stuff, it's really annoying and it ruins the way the output looks.

Process Your CSS

If you end up changing the tailwind.js config file by adding colors and sizes or creating components and custom utilities on your styles.css file, tailwind/js and tailwind/css respectively, you'll have to process/re-build Tailwind CSS. If you can't be bothered to set up Webpack or Gulp, simply:

• Run npm run --silent tailwind-build and that should be it.

I hope that you find this useful and that it saves a few seconds of your life.

Thanks for the help!