React with SASS and TailwindCSS

SASS and Tailwind CSS is two powerful tool for React to style components. While SASS is a powerful CSS preprocessor, offering features like variables, mixins and nesting to traditional CSS, Tailwind CSS, on the other hand, provides a utility-first approach to styling, meaning that you can create designs without having to write a lot of CSS.

In this article, we’ll explore how to use SASS and Tailwind CSS together in a react app. Let’s set up a react application.

Setting up a React project

The create-react-app command is the easiest way to build a react application. Open your terminal and run the following command:

npx create-react-app sass-tailwind-react

This command will create a new directory called sass-tailwind-react with a basic React project structure.

Then, navigate into the project directory with the following command and open this file with your code editor.

cd sass-tailwind-react

Adding Tailwind CSS

Next, In your terminal, run the following command to install Tailwind CSS and its dependicies.

npm install -D tailwindcss

This command will install Tailwind CSS. After the installation is complete, you need to generate a configuration file for Tailwind CSS. Then, run the following command in your terminal:

npx tailwindcss init

This command will create a tailwind.config.js file in the root of your project. Now, go to this page and paste the following tailwind configurations into here. This configuration settings tells component files under the src folder can use Tailwind CSS.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Then, you should add base tailwindCSS classes to your root css file so open your index.css file and add the following directives to it:

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

Now, you are able to add tailwindCSS classes your components to style them. However, you need the last step to integrate it with SASS.

Adding SASS

To enable SASS support in your React project, you need to install the node-sass package. In your terminal, run the following command:

npm install node-sass

Now, change your CSS files with extensions .css to .scss:

And import your main SASS files into your App.js or index.js files as you did before.

// App.js
@import './style/index.scss';
@import './style/app.scss';

Note that, we used the .scss extension instead of .sass. To explain briefly, SCSS is the newer version of SASS that uses almost the same syntax as CSS, unlike SASS which uses indentation-based syntax. For more information, you can check the article: SCSS vs SASS: What’re Differences

Writing SASS styles with Tailwind CSS

Now you can start writing SASS styles and using the power of Tailwind CSS. Open src/index.scss and start customizing your classes with SASS features.

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

$color: green;

body {
 background-color:$color;
}

Using SASS and TailwindCSS classes in React Components

Everything was set up, start styling your components with SASS and TailwindCSS.

Here is an example of the App.js file.

import React from 'react';
import './style/index.scss';

const App = () => {
  return (
    <div className="container mx-auto mt-4">
      <h1 className="text-4xl font-bold">SASS with Tailwind CSS</h1>
      <p className="text-gray-600">Supercharge your React styling!</p>
    </div>
  );
};

export default App;

To see the results, you need to run the following command in your terminal to start the application:

npm start

This command starts the development server, and you should be able to access your React application at http://localhost:3000.

Additionally, in production, your SASS files will be converted to CSS files, which you can find in your build folder.

Conclusion

Combining SASS with Tailwind CSS in a React project provides a powerful and flexible styling solution. With the step-by-step guide provided in this article, you are now ready to integrate SASS and Tailwind CSS into your own React projects.