cannot get minimum tailwind test to work

[mark-hahn]

I followed the instructions at https://tailwindcss.com/docs/installation ...

• Created empty folder named test
• Added package.json file (see below)
• Ran npm install and a ton of folders including tailwindcss appeared in node-modules
• Created test.css file (see below)
• Ran npx tailwindcss build test.css -o test-res.css and got error (see below)

Any help would be appreciated.

package.json ...

{
  "name": "test",
  "version": "1.0.0",
  "description": "tailwind test project",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "tailwindcss": "^1.1.4"
  }
}

test.css ...

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

input {
  @apply bg-blue;
}

error ...

wsl(~/test) npx tailwindcss build test.css -o test-res.css
npx: installed 55 in 8.896s

   tailwindcss 1.1.4

   🚀 Building... test.css

   🚫 CssSyntaxError: /root/test/test.css:6:3: `@apply` cannot be used with `.bg-blue` because `.bg-blue` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.bg-blue` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
    at /root/test/test.css:5:1
    at /root/test/test.css:6:3
    at Input.error (/root/.npm/_npx/11335/lib/node_modules/tailwindcss/node_modules/postcss/lib/input.js:130:16)
    at AtRule.error (/root/.npm/_npx/11335/lib/node_modules/tailwindcss/node_modules/postcss/lib/node.js:111:32)
    at onError (/root/.npm/_npx/11335/lib/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:94:27)
    at _lodash.default.reduce (/root/.npm/_npx/11335/lib/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:114:19)
    at _lodash.default.reduce (/root/.npm/_npx/11335/lib/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:115:94)
    at arrayReduce (/root/.npm/_npx/11335/lib/node_modules/tailwindcss/node_modules/lodash/lodash.js:683:21)
    at Function.reduce (/root/.npm/_npx/11335/lib/node_modules/tailwindcss/node_modules/lodash/lodash.js:9681:14)
    at decls.reject.flatMap.cssClass (/root/.npm/_npx/11335/lib/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:97:34)
    at arrayMap (/root/.npm/_npx/11335/lib/node_modules/tailwindcss/node_modules/lodash/lodash.js:639:23)
    at map (/root/.npm/_npx/11335/lib/node_modules/tailwindcss/node_modules/lodash/lodash.js:9554:14)

[mark-hahn]

WTH! (what-the-heck!)

When I changed bg-blue to bg-blue-100 or bg-white it worked. I searched the output file and bg-blue is not defined anywhere. Am I mispelling blue?

[tlgreg]

Unless you define a default blue in your tailwind configuration then this is the right behavior. The default color palette uses a numeric scale for every color except black and white.

https://tailwindcss.com/docs/customizing-colors#default-color-palette

[mark-hahn]

I chose bg-blue because tutorials use it all the time. Are you sure it wasn't supported earlier?

https://flaviocopes.com/vue-tailwind/

https://laracasts.com/discuss/channels/vue/is-there-anyway-to-go-about-using-events-outside-of-components-without-cluttering-up-the-root-instance

https://nick-basile.com/blog/post/building-a-comments-system-with-vuejs-laravel-and-tailwind-css-part-ii

https://dev.to/showcheap/my-vue-tailwindcss-configuration-3gjk

https://vuejsexamples.com/a-vue-plugin-to-quickly-generate-a-webapplication-layout/

... and more ...

[tlgreg]

It was, pre-1.0, but there were breaking changes since, including the change in the color palette.