Bazen birden fazla *.css dosyasını tek bir tailwindcss konfigrasyon dosyası üzerinden kullanmak isteyebiliriz. Bu durumda *.css dosyasındaki oluşturduğımız değerleri şu şekilde oluştururz. 

*.css

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

:root {
    --primary: 236 253 245;
    --secondary: 209 250 229;
}

tailwind.config.js:

...
theme: {
    extend: {
      colors: {
        'primary': 'rgb(var(--primary))',
        'secondary': 'rgb(var(--secondary))',
      }

    },
  },
...

HTML Kullanım:

<h2 class="text-primary"> ...

Örnek Uygulama:

app.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Khojki&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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


:root {
    --primary: 236 253 245;
    --secondary: 209 250 229;
    --elm_font_primary:"Poppins" ;
    --elm_font_secondary: "sans-serif";
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["index.html"],
  theme: {
    extend: {
      colors: {
        elmColorPrimary: 'rgb(var(--primary))',
        elmColorSecondary: 'rgb(var(--secondary))',
      },
      fontFamily: {
        elmFont: ['var(--elm_font_primary)', 'var(--elm_font_secondary)'],
      },

    },
  },
  plugins: [],
}