Using Tailwind CSS in SCSS-Based Projects

[alicannck]

Using Tailwind CSS in SCSS-Based Projects

Tailwind CSS is a utility-first CSS framework that allows developers to style elements quickly and efficiently. SCSS, on the other hand, is a preprocessor used for writing more organized, flexible, and maintainable CSS. In this article, I will walk you through the steps of integrating Tailwind CSS into SCSS-based projects. This guide will help those who want to leverage both the advantages of SCSS and the flexibility and speed offered by Tailwind, taking their projects to the next level.

Initialize the Project and Install Dependencies

The first step in setting up Tailwind CSS in your SCSS-based project is to initialize a new Node.js project. This is done using npm init -y, which generates a package.json file in your project directory. This file will hold all the information about your project and its dependencies.

Run the following command in your terminal:

npm init -y  

Next, you'll need to install Tailwind CSS and the required PostCSS dependencies. These are necessary to enable Tailwind CSS to work in your SCSS project. To install them, run the following command:

npm install tailwindcss postcss postcss-cli postcss-scss sass @tailwindcss/postcss

No Need for tailwind.config.js

In this setup, we do not need to create a tailwind.config.js file because we are directly importing Tailwind CSS into our SCSS file from the node_modules directory.

Configure PostCSS

Next, you need to create a postcss.config.mjs file in the root of your project. This file is used to configure PostCSS and its plugins.

To create this file, run the following command:

touch postcss.config.mjs

Once the file is created, open it and add the following configuration:

export default {
    syntax: 'postcss-scss',   // It will use SCSS syntax.
    plugins: {
        "@tailwindcss/postcss": {},
    }
}

Modify package.json Scripts

Next, you need to modify the scripts section of your package.json file to set up a development command for Tailwind CSS and SCSS.

Open your package.json file and update the scripts section like this:

{
  "scripts": {
    "dev": "postcss ./src/scss/style.scss -o ./dist/style.css --watch"
  }
}

Import Tailwind in SCSS

Now, open your style.scss file (or create one inside src/scss/) and import Tailwind CSS by adding the following line at the top:

@import "../../node_modules/tailwindcss/";

Start Development Server

Finally, to start your project and begin the development process, run the following command in your terminal:

npm run dev

Recommended VS Code Extensions

For a smoother development experience, I recommend installing the following Visual Studio Code extensions:

1. Live Server

Live Server is an extension that allows you to quickly open your project in the browser and automatically reloads it whenever you make changes to your files. This can be incredibly useful for seeing live updates of your project while you work.

To install Live Server, search for Live Server in the Extensions Marketplace and click Install.

2. Live Sass Compiler

Live Sass Compiler is an extension that compiles your SCSS files to CSS automatically and provides live updates. This helps you avoid manually running the build command every time you make a change to your SCSS files.

To install Live Sass Compiler, search for Live Sass Compiler in the Extensions Marketplace and click Install.

By using these extensions, you'll have an even more efficient and seamless development workflow, allowing for live updates as you work on your SCSS and Tailwind CSS project.

Installing Tailwind CSS IntelliSense

Add this line to the file where you imported Tailwind (settings.json)

"tailwindCSS.experimental.configFile": "src/scss/style.scss" // file where you imported Tailwind

[alicannck]

You are welcome to suggest any additions or improvements.

[Emii-lia]

Are scss files, other than the global one, where we define themes. able to use themes variables directly or do I also have to import them?

[alicannck]

To use theme variables in multiple SCSS files, you need to define them in a global SCSS file and import them where needed.

1. Define Theme Variables (theme.scss)

Create a global SCSS file to store your theme variables:

// styles/theme.scss
$primary-color: #3498db;
$text-color: #333;

2. Import Theme Variables in Other SCSS Files (main.scss)

To use these variables in another SCSS file, import the theme.scss file:

// styles/main.scss
@import "theme"; // Import the theme file

body {
  background-color: $primary-color;
  color: $text-color;
}

[Emii-lia]

I mean, the new tailwindcss @theme to define theme variables
https://tailwindcss.com/docs/theme

With this new approach, I'll have to import the stylesheet file where I defined the theme vars in order to use them in another stylesheet file?