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;
}
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.
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 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
craco.config.js
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
npx tailwindcss-cli@latest init
tailwind.config.js
tailwind
in your index.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
Add scss modules support by installing npm i [email protected]
. You can try other versions but higher versions didn't work for me.
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
.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With