Tailwindcss: NPM build script

[garygreen]

It seems tailwind doesn't like npm scripts.... running npm run build:css just opens the tailwind.js file for some reason? Command works fine if running in the console (and adding the /node_modules/.bin/tailwind)

{
  "name": "MyApp",
  "private": "true",
  "devDependencies": {
    "tailwindcss": "^0.4.0"
  },
  "scripts": {
    "build:css": "tailwind build styles.css -c tailwind.js -o output.css"
  }
}

[adamwathan]

This is just how npm run works; it looks for files in the current directory that match the command name before looking in /node_modules/.bin. I think it might be a decent idea to change the default config file name to avoid annoying things like this though, probably to tailwind.config.js to match Webpack's convention.

I'd recommend just changing that file name yourself if you want to avoid this collision.

[garygreen]

Ahh now I feel like a donkey. That makes sense, it's working now.

Loving tailwind and the screencasts, great job Adam!

One quick thing slightly off topic - if I were to add tailwind to an existing project which uses bootstrap, could it slip in seamlessly? I know there is a namespace option but would rather avoid that - would be cool to add some docs about migrating from Bootstrap to Tailwind and what kind of options there are (if you want to avoid namespacing).

[adamwathan]

Using the prefix option is the only way to avoid collisions with Bootstrap's classes; don't really have any ideas on how to use them both together if you aren't willing to do that. There's no way to write <div class="container"> and have it only use Tailwind's container or only Bootstrap's container if the classes have the same name for example.

[garygreen]

Maybe instead of prefixing every tailwind classname only a certain list could be prefixed? There's probably not that many collisions with Bootstrap out the box I would imagine, aside from the normalize stuff - which is kind of why I want to avoid using prefix altogether as I would bulk out classnames for the sake of maybe 5% collision.

[sundayz]

On Windows there's no output from npx tailwind help build or the build command itself if you use a config file called tailwind.js. It took me a few hours to find this issue and realise it was trying to open the script.

Maybe https://tailwindcss.com/docs/installation/ should suggest you call the file tailwind.config.js instead of tailwind.js

[adamwathan]

Maybe https://tailwindcss.com/docs/installation/ should suggest you call the file tailwind.config.js instead of tailwind.js

Yeah great point, was planning on doing this for 1.0 already and this is another strong reason to do it.