Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

TailwindCSS'de app.css den tailwind.config.js Değişken Değeri Aktarımı


Doğuhan ELMA

47 views

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: [],
}

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...