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

Active3 hr before
Viewed126 times

6 Answers


Meta Stack Overflow , Stack Overflow help chat ,Stack Overflow en español,Stack Overflow на русском

  • 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: [
  • npx tailwindcss-cli@latest init
  • make these changes in tailwind.config.js
  • include tailwind in your index.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
load more v

Run npm start again to see the CSS updates. ,Updating the purge options gives Tailwind CSS access to eliminate unused styles from all of the components in the production build. ,2. npm start (Run the React dev server),Start the React development server

Command Line (Windows)

C: \Users\ Owner > node - v
v12 .13 .1
load more v

A guide to using Tailwind with common CSS preprocessors like Sass, Less, and Stylus.,The easiest solution to this problem is to never mix regular CSS and imports in the same file. Instead, create one main entry-point file for your imports, and keep all of your actual CSS in separate files.,Using PostCSS as your preprocessor,When using Tailwind with Sass, using !important with @apply requires you to use interpolation to compile properly.

npm install postcss -
load more v

Are you saying I should always use Tailwind CSS for every project? Of course not! There are a few use cases where you may not want to use Tailwind CSS.,Tailwind CSS will swap these directives out at build time with all of its generated CSS. If you’re using postcss-import, use this instead:,You’d observe that our Tailwind CSS is building the necessary files needed in main.css., Share on Twitter, LinkedIn

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-4 mt-4">
load more v

Tailwind swaps all these directives out at build time and replaces them with the CSS generated.,Configure your app to use craco to run development and build scripts.,Open your App.js file and replace the content between the return function with the following:,@tailwind is a tailwind directive that is used to inject default base styles, components, utilities and custom configurations.

First, open your terminal and type the following commands to create a new project.

#using NPX
npx create - react - app tailwindreact - app

#using NPM
npm init react - app tailwindreact - app

#using yarn
yarn create react - app tailwindreact - app
load more v

Some of the problems Tailwind shares with inline styles: ,This is the power of CSS Combinators, one of the things you lose with Tailwind. ,So glad articles like these start to be written, providing simple and precise explanation of what is wrong with Tailwind. ,You have bigger problems than I can deal with here.

.flex {
   display: flex;
load more v

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