Vue-cli: Can't install Tailwind

[jean-smaug]

Version

3.7.0

Reproduction link

https://github.com/jean-smaug/condorcet/pull/40

Environment info

  System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 11.12.0 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 67.0
    Safari: 12.0.3
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.7.0 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.7.0 
    @vue/cli-plugin-babel: 3.7.0 => 3.7.0 
    @vue/cli-plugin-eslint: 3.7.0 => 3.7.0 
    @vue/cli-plugin-pwa: 3.7.0 => 3.7.0 
    @vue/cli-plugin-unit-jest: 3.7.0 => 3.7.0 
    @vue/cli-service: 3.7.0 => 3.7.0 
    @vue/cli-shared-utils:  3.7.0 
    @vue/component-compiler-utils:  2.6.0 (2.5.2)
    @vue/eslint-config-prettier: 4.0.1 => 4.0.1 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: 5.2.2 => 5.2.2 (4.7.1)
    jest-serializer-vue:  2.0.2 
    vue: 2.6.10 => 2.6.10 
    vue-clipboard2: 0.3.0 => 0.3.0 
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.1 
    vue-jest:  3.0.4 
    vue-loader:  undefined (15.7.0)
    vue-router: 3.0.6 => 3.0.6 
    vue-slicksort: 1.1.3 => 1.1.3 
    vue-style-loader: 4.1.2 => 4.1.2 
    vue-template-compiler: 2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.8.2 (1.9.1)
    vuex: 3.1.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

yarn install
yarn serve

What is expected?

CSS is compiled and server run normally

What is actually happening?

ERROR Failed to compile with 3 errors 12:27:12

These dependencies were not found:

• -!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-
  3-1!../node_modules/postcss-loader/src/index.js??ref--6-o
  neOf-3-2!./tailwindcss/base in ./node_modules/css-loader/
  dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-load
  er/src??ref--6-oneOf-3-2!./src/main.css
• -!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-
  3-1!../node_modules/postcss-loader/src/index.js??ref--6-o
  neOf-3-2!./tailwindcss/components in ./node_modules/css-l
  oader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcs
  s-loader/src??ref--6-oneOf-3-2!./src/main.css
• -!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-
  3-1!../node_modules/postcss-loader/src/index.js??ref--6-o
  neOf-3-2!./tailwindcss/utilities in ./node_modules/css-lo
  ader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss
  -loader/src??ref--6-oneOf-3-2!./src/main.css

To install them, you can run: npm install --save -!../nod
e_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../nod
e_modules/postcss-loader/src/index.js??ref--6-oneOf-3-2!.
/tailwindcss/base -!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-3-2!./tailwindcss/components -!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-3-2!./tailwindcss/utilities

[LinusBorg]

Since you didn't add the postcss-import plugin, the import statement has to use a tilde to mark node module imports:

@import "~tailwindcss/base";

@import "~tailwindcss/components";

@import "~tailwindcss/utilities";

I assume you took this code from the tailwind docs, but those explicitly talk about setups that use postcss-import, which Vue CLI doesn't include by default.

[jean-smaug]

Resolved by using

@tailwind base;

@tailwind components;

@tailwind utilities;