Tailwind install failed

[zerubeus]

I'm having hard time getting Tailwind to work with snowpack following the official doc.

I'm using this official app Templates: @snowpack/app-template-blank-typescript

package.json

{
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
    "test": "echo \"This template does not include a test runner by default.\" && exit 1",
    "format": "prettier --write \"src/**/*.{ts,js}\"",
    "lint": "prettier --check \"src/**/*.{ts,js}\""
  },
  "dependencies": {
    "canvas-confetti": "^1.2.0",
    "tailwindcss": "^1.7.6"
  },
  "devDependencies": {
    "@snowpack/plugin-run-script": "^2.1.1",
    "@types/canvas-confetti": "^1.0.0",
    "@types/snowpack-env": "^2.3.0",
    "postcss-cli": "^7.1.2",
    "prettier": "^2.0.5",
    "snowpack": "^2.10.0",
    "typescript": "^3.9.7"
  }
}

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

snowpack.config.json

{
  "mount": {
    "public": "/",
    "src": "/_dist_"
  },
  "plugins": [
    [
      "@snowpack/plugin-run-script",
      { "cmd": "tsc --noEmit", "watch": "$1 --watch" }
    ],
    [
      "@snowpack/plugin-build-script",
      {
        "cmd": "postcss",
        "input": ["src/css/index.css"],
        "output": ["public/index.css"]
      }
    ]
  ],
  "installOptions": {
    "installTypes": true
  }
}

src/css/index.css

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

The error:

snowpack

  Server starting…

▼ Console

[snowpack] ! updating dependencies...
[snowpack] ! installing dependencies…
[snowpack] Package "tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities" not found. Have you installed it?
[snowpack] Install failed.

[FredKSchott]

Thanks for filing! If you're using latest Snowpack, you should be able to remove require('postcss-import'), from your postcss config. Can you try that and see if it fixes the issue?

[zerubeus]

Same problem..., you can find a reproduction of the issue here, thank you again for your reactivity

error:

snowpack

  Server starting…

▼ Console

[snowpack] ! updating dependencies...
[snowpack] ! installing dependencies…
[snowpack] Package "tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities" not found. Have you installed it?
[snowpack] Install failed.

[FredKSchott]

Oh wait, I just looked at that input again, it's grabbing that whole multiline string as a single import. @drwpow REGEX strikes again!

[drwpow]

[FredKSchott]

Fixed in #991, thanks again for filing!

[ryands17]

Hey @FredKSchott 👋
I'm still facing this error with snowpack version 2.11.1.

Reproduction repo: https://github.com/ryands17/react-experimental/

I even tried snowpack --reload, but it gives the same error.

[FredKSchott]

Sorry for the delay, took me a while to find time to set up Tailwind in a project.

A couple of things going on here, which I'll tackle in order:

1. A CSS import is either a package or a CSS file. A pseudo-import like tailwindcss/base instead of tailwindcss/base.css is not supported by Snowpack. We could look into fixing this, but the next issue is the bigger issue.
2. Tailwind's tailwindcss/XXXXXX imports are only designed to work with PostCSS and not native CSS. Importing them basically does nothing, which is annoying because it's hard to tell what's gone wrong. Instead of @import 'tailwindcss/base.css' you'll want to do @import 'tailwindcss/dist/base.css'.

@import 'tailwindcss/dist/base.css' worked for me.

Given all of that, I've updated our docs to be more helpful: #1143. Please take a look and let me know if that makes sense.

[ryands17]

Let me try and get back to you :) If it doesn't work, I'll end up using the @tailwind directive imports then :)

[ryands17]

Hey @FredKSchott sorry for the late reply. Importing from tailwindcss/dist works like a charm :)

[hulkyhawk]

i make a global.css in my src and import it from the index.ts works.
by the way i kept the postcss-import

@import "tailwindcss/dist/base.css";
@import "tailwindcss/dist/components.css";
@import "tailwindcss/dist/utilities.css";

@FredKSchott however jit mode and prefix won't work

[Natetronn]

I struggled to get tailwind and snowpack working together. I tried a few different methods discussed here and per the docs: https://www.snowpack.dev/#tailwind-css

@ryands17 if you have a spare minute, would you mind breaking down the path you took in the end?

Perhaps a quick vanilla repo with snowpack and tailwind would be helpful.

[ryands17]

@Natetronn sure, here's the repo I've setup with Tailwind working. Let me know if this helps :)

[Natetronn]

Thank you!

Hmm, right off the bat I think I may have had this different:

https://github.com/ryands17/react-experimental/blob/master/snowpack.config.js#L13

I was setting the full path to the files themselves. I realize now, how you have it, it's exactly how the docs say to do it.

You also have src/index.css whereas I was doing src/css/tailwind.css, which is why I thought I may need to use the full path in the snowpack.config.js on line 13 there.

Anyway, I'll see if I can get it working again.

[secondmanveran]

@ryands17 I guess you decided to go with Vite at the end of the day. No Snowpack in that referenced repo.

[minimit]

With the new Tailwind 2.0 snowpack gives me this error:

[snowpack] installing dependencies...
[snowpack] Package "tailwindcss/base" not found. Have you installed it? 

My postcss config is this

module.exports = {
  plugins: [require(`postcss-import`), require(`tailwindcss`), require('postcss-nested')],
}

[minimit]

My bad ad a wrong import

[garand]

@chase Same fix works for me as well, good find.

[FredKSchott]

Glad that this fix is working for so many people!

If anyone is interested in adding a warning about using postcss-import with Snowpack to our new PostCSS guide, that would be great! https://github.com/snowpackjs/snowpack/blob/main/www/_template/guides/postcss.md

[joshnuss]

Also, should the Snowpack+PostCSS+Tailwind docs be updated?
I believe it should say:

@import "tailwindcss/dist/base.css";
@import "tailwindcss/dist/components.css";
@import "tailwindcss/dist/utilities.css";

[babichjacob]

Also, should the Snowpack+PostCSS+Tailwind docs be updated?
I believe it should say:

@import "tailwindcss/dist/base.css";
@import "tailwindcss/dist/components.css";
@import "tailwindcss/dist/utilities.css";

This will always give the CSS generated by the default Tailwind config rather than your own, so probably not.

[zebratt]

Same problem...but only happens when i install/uninstall some packages.

snowpack version: "3.0.11"

snowpack

▼ Console

[snowpack] ! building dependencies...
[snowpack] Package "tailwindcss/base" not found. Have you installed it?

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

// tailwind.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

.flex-center{
  @apply flex justify-center items-center;
}

// postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

I have to do several steps to fix this problem temporarily (happens again when i change any packages)

1. comment the css import statement in the entry file
2. delete the tailwind.css (still not working without this step)
3. run snowpack dev, then stop it
4. uncomment the css import statement in step 1
5. recover the file deleted in step 2
6. run snowpack dev again, everything is ok