Using config() on custom import pages

[completewebco]

I have custom css files being imported in the main css file where the @tailwind declarations are. I need to call the set colors in those files and I used color: config('colors.blue'); but this only works in the main css file and not in the imports.

How can I use the variables in the import css files and should I be adding custom css files in a different way to be used with tailwind?

[adamwathan]

Can you post an example project that demonstrates what you’re trying to do? There are a few things that come to mind but faster if I can just see what you’re doing.

If not, are you using a preprocessor like Sass or Less? If not, have you included the PostCSS-import plugin (or another import inlining plugin)? If so does your main CSS file contain any non-import statements before your import statements? If so PostCSS-import will often sort of silently fail in those scenarios; as per CSS spec it disallows having import statements after any non-import statements in the same file.

[completewebco]

Hello Adam and Thank you for your response.

Here is my CSS file using PostCSS-Import:

@import 'components/accordion/';
@import 'components/fancybox/';
@import 'components/slider/';
@import 'components/social/';
@import 'components/navigation/';
@import 'components/mobile/';
@import 'components/posts/';
@import 'components/custom/';

@tailwind preflight;
@tailwind components;
@tailwind utilities;

Using config() in this file works fine. Using it in any of the imported css files does not work.

Thanks for help and Happy New Year!

[hacknug]

Is it possible that you're running tailwindcss before postcss-import? If not, what does your PostCSS config look like?

[completewebco]

Hello Hacknug,

I am using Gulp and I think I have tailwind going first:

I will switch the order

gulp.task('css', function () {
    var postcss = require('gulp-postcss');
    var tailwindcss = require('tailwindcss');
    var plugins = [
        tailwindcss('tailwind.js'),
        require('postcss-import'),
        require('autoprefixer'),
        autoprefixer({browsers: ['last 1 version']}),
        cssnano()
    ];

    return gulp.src('css/src/index.css')
      .pipe(postcss(plugins))
      .pipe(gulp.dest('css/production/'))
      .pipe(browserSync.stream());
  });

[hacknug]

Now you know why it's happening. Place postcss-import first to fix it. Also keep in mind you're running autoprefixer twice.

[completewebco]

That did it. Thanks much!

[completewebco]

Thank you also for the prefixer pickup.