Tailwind dosen't work on vue 4.3.1 with Sass

user_3672883 0
Viewed 1253

I am trying to add tailwind to vue project, in order to do this I am following the next steps:

Version of vue

vue --version
@vue/cli 4.3.1

Create project

vue create tailwindproject
(node-sass, babel, router, eslint, with dedicated files)

Install tailwind

npm install tailwindcss

Create css file on:

touch ./src/styles/tailwind.scss

Copy the following content on ./src/assets/styles/tailwind.scss

@tailwind base;

@tailwind components;

@tailwind utilities;

Add the following line into main.js

import './assets/styles/tailwind.scss'

Execute

npm run serve

And appears the following message

Failed to resolve loader: sass-loader You may need to install it.

Install sass-loader with

npm install --save sass-loader

And appear the following error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Cannot find module 'sass'

I solved this with:

npm install --save-dev node-sass

Run server again, but the view looks without tailwind css.

are there any way of install correctly tailwind with sass and vue4?

Thanks

tailwind-css vue.js sass
2 Answers

You need to pass the compiled css file through postcss. TailwindCSS is a postcss plugin, Sass cannot do anything with it. I think you should check the docs again.

Basically create a postcss.config.js file with this:

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

Then import your tailwind.css file in Vue.

user_25322430

Alternatively you can use tailwind cli npx tailwindcss init to setup tailwind.

user_113529170
Related