Using TailwindCSS in SvelteKit to make a Design System : Part Two

Using TailwindCSS in SvelteKit to make a Design System : Part Two

Read if:

  1. You have checked Part One

I would say please read part one if you haven't, it's a continuation.

Introduction
In last part we learned how to What is design system, tailwindcss, sveltekit. We also created a project where we added tailwind css in sveltekit. That what we have done in last part. In this part we gonna make changes in our tailwind.config.cjs file to define are colors, screen sizes, spacing and many more things.

Get to know tailwind configurations
Here we gonna edit tailwind config file. Tailwind provides out of the box design system level configuration.

  • First i will explain what we can do with config file.

  1. content : It is an array type object, where we pass which file to be processed by tailwind compiler to add tailwind css in your project.

  2. theme : It is a dictionary type object, where you define your color palette, fonts, type scale, border sizes, breakpoints — anything related to the visual design of your site.

  3. plugins : It is an array type object, this allows you to register plugins with Tailwind that can be used to generate extra utilities, components, base styles, or custom variants.

  4. corePlugins : It is a dictionary type object, where you completely disable classes that Tailwind would normally generate by default if you don’t need them for your project.

According to me, these are the main parameters that you need to play with mostly in config file. If you wanna learn more about configuration click here.

Setting up tailwind config
In our project, I'm going to focus on theme section which is the most important for a design system.

  • In theme section you have two options.
  1. Extend the default config of tailwind css : Which means you can add your properties and u can have tailwind properties too. 
theme: {
    extend: {
        colors: {
            'additional-color-name':'value',
        }
    }
Enter fullscreen mode Exit fullscreen mode
  1. Replacing default : Which means you have all the controls of all properties. Tailwind default will be replaced by your provided values. 
theme: {
    colors: {
        'color':'value',
    }
}
Enter fullscreen mode Exit fullscreen mode

This will replace the default colors.
If you wanna learn more about tailwind theme configuration click here

  • We need our design system, so we gonna replace default with our values. Here, I'm going with my own colors.

So, I'll add this configuration in my tailwind config of theme:

const colors = require('tailwindcss/colors.js');

theme: {
        colors: {
            gray: colors.gray,
            black: colors.black,
            white: colors.white,
            danger: colors.rose,
            info: colors.sky,
            warning: colors.amber,
            success: colors.teal,
            primary: colors.orange,
            secondary: colors.violet,
            tertiary: colors.rose
        }
    }
Enter fullscreen mode Exit fullscreen mode

Here, I decide to use tailwind colors with my own defined names or you can use tailwind shade generators and can provide color config.

That's all we have to add our design system's colors. Same we can do with screens, spacings too.

How to use it?
In last part, In the end we had this code :

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
Enter fullscreen mode Exit fullscreen mode

If you notice we didn’t gave it a color property last time but we can do that in default or custom without any issues.

Now when we are using are design system we can do this :

<h1 class="text-3xl font-bold underline text-primary">
  Hello world!
</h1>
Enter fullscreen mode Exit fullscreen mode

This will generate add style for color on that text that you have provided in config.

This is the end of the this series with two parts.
Thank You for reading till the end.

This is me writing for you. If you wanna ask or suggest anything please put it in comment.

HomeBlog

© 2023 EtherCorps. All rights reserved.