Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use @apply directive of tailwind in any .scss file instead of only using it main tailwind file(in React)?

I am working in react with typescript and tailwindcss.

What I want is that instead of using @apply directive in main tailwind.css file (the file which conatins @tailwind base, @tailwind components, etc), I want to use it in any .scss file.

For example, in react whenever I create a component, I create a folder and an inside it I create a index.tsx file and a .scss file. I want to use @apply directive in that .scss file. In this way, it will be easy to work and debug because both the associated files will be inside the same folder. How can I achieve that ??

I have shown my basic folder structure below.

Folder structure:

src > components > Header > Header.tsx

import React from "react";
import styles from "./Header.module.scss";

interface Props {}

const Header: React.FC<Props> = (props) => {
  return <div className={styles.headerTag}>Header part here</div>;
};

export default Header;

src > components > Header > Header.module.scss

// what to import so that I can use tailwind like this

.headerTag {
  @apply text-8xl font-bold bg-gray-500;
}

like image 509
Ashutosh Avatar asked Jan 01 '21 19:01

Ashutosh


People also ask

What is Postcss tailwind?

Get started with Tailwind CSS. Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero-runtime.


2 Answers

Created a repo with working solution.
If your project is based on create-react-app follow steps below to achieve that.

Add tailwind to your project

Add tailwind to your project following this guide from documentation. Note: they use craco to modify CRA webpack's configuration, but I'm sure you can do the same with react-app-rewired.

Steps:

  • npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  • npm install @craco/craco
  • Make these changes in your package.json
  • create a file called craco.config.js
// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}
  • npx tailwindcss-cli@latest init
  • make these changes in tailwind.config.js changes in
  • include tailwind in your index.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

Add scss modules support

Add scss modules support by installing npm i [email protected]. You can try other versions but higher versions didn't work for me.

That's it

If it still doesn't work for you for some reason see repo for versions/configuration difference to get an idea what to change to handle it.

If you are using custom webpack build (or your project is not CRA based) more steps may be needed to work with taildwind and scss-modules.

Why postcss@7?

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

As of v2.0, Tailwind CSS depends on PostCSS 8. Because PostCSS 8 is only a few months old, many other tools in the ecosystem haven’t updated yet, which means you might see an error like this in your terminal after installing Tailwind and trying to compile your CSS:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

Create React App doesn’t support PostCSS 8 yet so you need to install the Tailwind CSS v2.0 PostCSS 7 compatibility build for now as we’ve shown above.

like image 63
nickbullock Avatar answered Oct 07 '22 04:10

nickbullock


Seems like to achieve what you looking for you need to use a postcss-import plugin and configure main tailwind file slightly differently. I've made a very quick repo to demonstrate setup:

Repo link

Official docs on the matter

Basically, instead of just having this "typical" tailwind css file:

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

You need to add a dev dependency on postcss-import package. Then update postcss.config.js to actually use it:

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

And change main css file for tailwind to use imports instead:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./components/Header/Header.module.css";
@import "tailwindcss/utilities";

This way you can start creating separate css files/modules and use them like you wanted to.

Here is Header.modules.css:

.headerTag {
    @apply bg-green-500 text-8xl;
}

I am not sure I personally prefer this way, because I guess the gist of tailwind is specifically not using bunch of css component classes, so instead I definitely prefer to just create React components with almost "inline" styling:

import React from "react";

interface Props {
    className: string;
}

const Header: React.FC<Props> = (props) => {
  return <div className={`bg-green-500 text-8xl ${props.className}`}>Header part here</div>;
};

export default Header;

This way I can override default styling at the place of usage.

like image 33
fxdxpz Avatar answered Oct 07 '22 04:10

fxdxpz