@apply not working from imported scss file

[RomkaLTU]

main.scss: @import 'header';

_header.scss

.header {
    &-bottom-menu {
        @apply flex justify-end font-bold;
    }
}

It doesnt work like that. Only inside main.scss...

Using webpack 4

[adamwathan]

Can you create a repo with a small demo project? Would be the easiest way to help troubleshoot as based on the info you've provided that is definitely supposed to work 👍

[RomkaLTU]

Sure, here: https://github.com/RomkaLTU/tmp-tailwind-scss-partials-apply Thanks.

[adamwathan]

Submitted a PR with the fix:

https://github.com/RomkaLTU/tmp-tailwind-scss-partials-apply/pull/1/files

In this case your loader order was wrong in webpack, have to make sure the Sass loader runs before the PostCSS loader so it needs to be last in the array (how intuitive right? 😖)

[RomkaLTU]

Thanks, something new to me (order is from bottom to top?).

[paulhuisman]

Hi guys,

This is still an issue for me.

main.scss:

@charset 'UTF-8';

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

@import './components/_button.scss';

_button.scss:

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-purple-dark {
  @apply bg-purple-dark text-white;
}
.btn-blue:hover {
  @apply bg-purple-light;
}

If I put the code from _button.scss in main.scss it does work properly.

[adamwathan]

Can you create a GitHub repo that reproduces the problem?

[WebKieth]

It reproducing on last version of angular cli. Just add and configure ng-tailwind on angular-cli project with scss and try to import by @tailwind and use @apply

[khairahscorner]

Hi, it's my first time using @apply and I can't figure out what's wrong. I have an index.css which I import into my main.js file. Here's the content of the index.css file:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
.btn {
  @apply text-white font-bold py-1 px-3 rounded-lg;
}

But the .btn class still doesn't get processed even though compilation is successful

What am I doing wrong?

[hacknug]

@khairahscorner looks like Tailwind isn't running there. Are you using PostCSS? If not, take a look at this section of the docs where it explains how to set it up: https://tailwindcss.com/docs/installation#4-process-your-css-with-tailwind

[khairahscorner]

@hacknug I followed through with this and it's still the same. My @tailwind declarations weren't working also and I had to use a workaround by importing them directly from node_modules. Following through with the docs, @tailwind and @apply still doesn't work. Here's my postcss.config.js,

module.exports = {
"plugins": [
    require('postcss-import'),
     require('tailwindcss'),
     require('postcss-preset-env')({ stage: 1 }),
    ]
 }

webpack.config.js file

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
              ],
            },
          },
          'style-loader'
        ],
      }
    ]
  }
}

Part of package.json

"dependencies": {
    "postcss-custom-properties": "^9.0.2",
    "postcss-import": "^12.0.1",
    "postcss-preset-env": "^6.7.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "chalk": "^2.1.0",
    "connect-history-api-fallback": "^1.4.0",
    "copy-webpack-plugin": "^4.1.1",
    "css-loader": "^0.28.7",
    "cssnano": "^3.10.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.5",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.19.1",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.3.0",
    "postcss-loader": "^3.0.0",
    "rimraf": "^2.6.2",
    "semver": "^5.4.1",
    "shelljs": "^0.7.8",
    "sw-precache-webpack-plugin": "^0.11.4",
    "tailwindcss": "^1.1.2",
    "uglify-es": "^3.1.3",
    "url-loader": "^0.6.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.7.1",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0"
  },

Am I missing something?

[khairahscorner]

Okay so I discovered npm install might have been causing issues because it didn't install all postcss devDependencies that I needed. Used yarn instead and my PostCSS works fine now.