How to start a TailwindCSS project with SCSS

TailwindCSS is a utility first framework. It's tiny in comparison to Bootstrap, which includes hundreds of large, clunky, pre-built components.Instead, Tailwind includes hundreds of simple, easy to chain together classes to style your pages. These classes can also be stripped and minified when youre finished designing, resulting in a tiny css file.

SASS is a CSS preprocessor that makes writing CSS more efficient and in my opinion much easier.
In this post, I'll show you how you can set up SASS with TailwindCSS in your project. For this purpose we will use Vite as a build tool.

Getting Started

Open up your terminal and run the following command

npm init vite my-project

From the dropdown select framework to vanilla

Select variant to vanilla also. If you want to use typescript then choose to vanilla-ts

Now cd into your project

cd my-project

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.jsand postcss.config.js.

npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {  content: [    "./index.html",    "./src/**/*.{vue,js,ts,jsx,tsx}",  ],  theme: {    extend: {},  },  plugins: [],}

Now install sass as a dev dependency

npm install -D sass

Create a folder scss and move the style.css file to scss folder and rename it to style.scss

Now add the @tailwind directives for each of Tailwinds layers on your style.scss file.

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

Import the ./scss/style.cssfile in your ./main.js file.

import './scss/style.scss'

Run your build process with the following command

npm run dev

Your local development server will run on http://localhost:3000

Start using Tailwinds utility classes to style your content from your index.html file.

<h1 class="text-3xl font-bold underline">  Hello world!</h1>

You can also use this GitHub repository as a starter template.