#Can't import tailwind config

11 messages · Page 1 of 1 (latest)

slate lynx
#

Hi. I'm trying to import my tailwind config using js in an astro component but I am getting this error and I'm not sure how to fix it? Any ideas?

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../../tailwind.config.cjs';

const fullConfig = resolveConfig(tailwindConfig);
image.png
snow basalt
#

you can't use import syntax in/with a commonjs (.cjs) file

#

try renaming the files to .mjs (esm modules) or .ts (for typescript)

slate lynx
snow basalt
#

with the error now mentioning the new file extension?

slate lynx
#

yes

snow basalt
#

can I see the config?

slate lynx
# 
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.astro'],
    theme: {
        extend: {},
        fontFamily: {
            sans: ['Roboto'],
        },
    },
    plugins: [],
};
snow basalt
#

This should work for .ts. since cjs doesn't allow imports, it's probably easier this way round

import type { Config } from 'tailwindcss'

const config: Config {
    content: ['./src/**/*.astro'],
    theme: {
        extend: {},
        fontFamily: {
            sans: ['Roboto'],
        },
    },
    plugins: [],
}
export default config;
slate lynx
#

thank you that worked :)