DEV Community

Md Mostafizur Rahman
Md Mostafizur Rahman

Posted on • Updated on

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 you’re 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
Enter fullscreen mode Exit fullscreen mode

From the dropdown select framework to vanilla

Select Framework form vite

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

Select variant

Now cd into your project

cd my-project
Enter fullscreen mode Exit fullscreen mode

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 autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

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: [],
}

Enter fullscreen mode Exit fullscreen mode

Now install sass as a dev dependency

npm install -D sass
Enter fullscreen mode Exit fullscreen mode

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 Tailwind’s layers on your style.scss file.

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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

import './scss/style.scss'
Enter fullscreen mode Exit fullscreen mode

Import SCSS

Run your build process with the following command

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

Start using Tailwind’s utility classes to style your content from your index.html file.

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

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

Discussion (1)

Collapse
andrewbaisden profile image
Andrew Baisden

Great guide super simple.