How to use tailwind using sass on vue.js?

@jasen 

To use Tailwind CSS with your Vue.js project using Sass, follow these steps:

1. Install Tailwind CSS and Sass in your project:

1

npm install tailwindcss sass

1. Create a Tailwind CSS configuration file and a Sass file in your project directory:

1
2

npx tailwindcss init
touch src/assets/styles/main.scss

1. Open the tailwind.config.js file and enable the jit mode:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

module.exports = {
  mode: 'jit',
  purge: [
    './src/**/*.{vue,js,html}'
  ],
  theme: {
    extend: {},
  },
  variants: {},
}

1. Import Tailwind CSS and configure it in your main.scss file:

1
2
3

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

1. Import the Sass file in your Vue components:

1
2
3

<style lang="scss">
@import '@/assets/styles/main.scss';
</style>

1. Start your Vue.js project and you should now be able to use Tailwind CSS classes in your Vue components with Sass.

That's it! You have successfully set up Tailwind CSS with Sass in your Vue.js project. Now you can start using Tailwind CSS utility classes to style your components.