Importing a JS into the Tailwind Config File

[ghost]

I would like to organize and modify the tailwind config file by creating module files that I then import. For example -- I'd like to create different colors.js files which I can import when I want/need (basic-colors.js; material-colors.js, etc).

To test out if this would work, I created a test.js file and tried importing it into the tailwind-config file like this: import test from '/tailwind/tl1/test'

But when I try to compile, I get a Syntax error: SyntaxError: Unexpected token import

I am wondering if the issue is with my webpack mix file - which looks like this:

let mix = require('laravel-mix');
let tailwindcss = require('tailwindcss');

mix.postCss('dev/styles.css', 'prod/css', [
  tailwindcss('./tailwind.config.js'),
])

The tailwind.config.js is running through postCss. I assume that is the problem for using import.

Either way, any suggestion on how to make this work?

Thanks.

[adamwathan]

You can't use import statements in your tailwind.js file because Node doesn't support ES6 module syntax. If you use regular require statements it should work though!

[ghost]

Thanks.

Now I have a new error: Module build failed: Error: Cannot find module '/tailwind/tl1/test'

but I know that the file is there.

This is what I wrote in the tailwind-config file:

let defaultConfig = require('tailwindcss/defaultConfig')()
let test = require( '/tailwind/tl1/test')

Any ideas?

[adamwathan]

Need to use a relative path; if I'm not mistaken the way you have it there is looking at the root of your hard drive.

Try this, assuming tailwind/tl1/test is a folder relative to the this JS file:

let defaultConfig = require('tailwindcss/defaultConfig')()
let test = require( './tailwind/tl1/test')

If that's not how you have things structured you just need to traverse around directories as needed to get to the right place (../../tailwind/tl1/test sort of thing).

[ghost]

That fixed it - thanks.

[AndrewBogdanovTSS]

@adamwathan is there any way to add support for static imports in tailwind.config.js? Maybe it can be run via projects babel webpack setup? I use Nuxt and have to share several files I use both on client and server and I can't import files with module.exports which is required by require and also I can't require files that were exported with export default.