background

In the 2B project, there are often customers (father of Party A) need to customize the website with the same theme as their enterprise. With the launch of Apple’s Dark mode, the need for skin change is becoming more and more important in website development. Recently, I saw a video of Tailwind Labs’ skin change implementation on the Internet and decided to practice it.

Implementing blog lists

Let’s start by implementing a list of blogs using Tailwind CSS

  • The effect

  • The HTML code
<div class="min-h-screen bg-white">
  <ul class="p-10 space-y-10">
    <li>
      <a class="text-gray-600">
        <article class="relative flex items-center transition-transform transform group hover:-translate-x-2">
          <div class="flex flex-col flex-grow py-8 space-y-4 text-base rounded px-8 shadow-md bg-gray-50">
            <div class="flex flex-row justify-between">
              <h3 class="text-xl text-gray-900 font-bold">UseEffect complete guide</h3>
              <span>2020-06-08</span>
            </div>
            <p className="leading-8">You wrote some components in Hooks, or even a small application. You may be satisfied that you are comfortable with its API and have picked up a few tricks in the process.</p>
          </div>
        </article>
      </a>
    </li>
    <li>
      <a class="text-gray-600">
        <article class="relative flex items-center transition-transform transform group hover:-translate-x-2">
          <div class="flex flex-col flex-grow py-8 space-y-4 text-base rounded px-8 shadow-md bg-gray-50">
            <div class="flex flex-row justify-between">
              <h3 class="text-xl text-gray-900 font-bold">Theme peels are implemented using CSS Variables and Tailwind CSSS</h3>
              <span>2020-06-08</span>
            </div>
            <p className="leading-8">According to Tailwind Labs' [Peel video], manual practice.</p>
          </div>
        </article>
      </a>
    </li>
  </ul>
</div>


Copy the code

CSS variables

Using CSS variables is the most convenient solution to achieve skin, according to the traditional solution has to add some CSS class can be achieved, such as:

:root {
    --page-bg:#fff;
    --card-bg:#F9FAFB; /* gray-50 */
    --title-color:# 111827;/* gray-900 */
    --desc-color:#4B5563; /* gray-600 */
  }

  .theme-dark {
    --page-bg:# 111827; /* gray-900 */
    --card-bg:#1F2937; /* gray-800 */
    --title-color:#F3F4F6;/* gray-100 */
    --desc-color:#E5E7EB; /* gray-200 */
  }
.page__bg{
  background-color: var(--page-bg);
}
.post__card{
  background-color: var(--card-bg);
}
.post__title{
  color: var(--title-color);
}
.post__desc{
  color: var(--desc-color) ;
}
Copy the code

This makes dark skin possible. If you want to add a set of skin, just add a set of color variables.

compatibility

CSS Variables only supports modern browsers, but many customers still use IE11. To be compatible with IE11, you can use the postCSS plugin postCSS-custom-properties

For example:

:root{-color: red;
}
h1 {
  color: var(--color);
}
Copy the code

After being processed by postCSS, the following CSS properties are obtained. Browsers automatically ignore unsupported CSS properties.

h1 {
  color: red;
  color: var(--color);
}
Copy the code

However, this plugin is only useful for the first time you compile it, and it doesn’t work for dynamic peels. We can fix this by using JS Polyfill and introducing the following code into the HTML.

<script>window.MSInputMethodContext && document.documentMode && document.write('< script SRC = "https://cdn.jsdelivr.net/gh/nuxodin/[email protected]/ie11CustomProperties.min.js" > < \ / script >');</script>
Copy the code

😅 however, this does not fully reflect the advantages of Tailwind CSS. Tailwind is utility-first and does not need to use a class name when writing a page.

Tailwind configuration

Tailwind CSS allows the user to configure some custom colors in tailwind. Config. js, thus adding a class of colors to the CSS.

const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit'.theme: {
    extend: {
      colors: {
        amber: colors.amber,
        lime: colors.lime,
        rose: colors.rose,
        orange: colors.orange,
      },
    },
    backgroundColor: {
      //utilities like `bg-base` and `bg-primary`
      base: 'var(--color-base)'.'off-base': 'var(--color-off-base)'.primary: 'var(--color-primary)'.secondary: 'var(--color-secondary)'.muted: 'var(--color-text-muted)',},textColor: {
      //like `text-base` and `text-primary`
      base: 'var(--color-text-base)'.muted: 'var(--color-text-muted)'.'muted-hover': 'var(--color-text-muted-hover)'.primary: 'var(--color-primary)'.secondary: 'var(--color-secondary)',}},variants: {},
  plugins: [],}Copy the code

For ease of use and memorization, I used a few simple variable names to define, background and font colors, and of course to extend other styles like borderColor

You can then define the variable theme method in the CSS to get tailwind’s built-in colors. You want to use the colors instead of the configuration in Colors. With multi-colors access customizing-colors, of course

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


@layer base {
  .theme-light{-color-base: theme('colors.white'); 
    --color-text-base: theme('colors.black'); 
    --color-off-base: theme('colors.gray.50');
    --color-text-muted: theme('colors.gray.600');
    --color-text-muted-hover: theme('colors.gray.500'); 
    --color-primary: theme('colors.blue.600'); 
    --color-secondary:theme('colors.blue.300'); 
  }

  .theme-dark{-color-base: theme('colors.gray.900');
    --color-text-base: theme('colors.gray.100'); 
    --color-off-base: theme('colors.gray.800'); 
    --color-text-muted:theme('colors.gray.300'); 
    --color-text-muted-hover: theme('colors.gray.200');
    --color-primary: theme('colors.blue.500'); 
    --color-secondary: theme('colors.blue.200'); }}Copy the code

The style in tailwind is text-animation-10, which sets the font color and opacity. Check the source code and find that the style is implemented using RGBA.

.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgba(17.24.39.var(--tw-text-opacity));
}
Copy the code

To support this transparency style, we also need to convert the color to Rgb,tailwind.config.js configuration

function withOpacity(variableName) {
    return ({ opacityValue }) = > {
        if (opacityValue) {
            return `rgba(var(${variableName}), ${opacityValue}) `;
        }
        return `rgb(var(${variableName})) `;
    };
}

module.exports = { ... .theme: {
        // we want to extend the current colors instead of replacing them
        extend: {
         //like `bg-base` and `bg-primary`
            backgroundColor: {
                primary: withOpacity('--color-primary'),
                secondary: withOpacity('--color-secondary'),
                muted: withOpacity('--color-text-muted'),},//like `text-base` and `text-primary`
            textColor: {
                primary: withOpacity('--color-primary'),
                secondary: withOpacity('--color-secondary'),}}}Copy the code

Color definition in the CSS

.theme-dark{-color-base: 17.24.39;                /* gray-900 */
    --color-text-base: 243.244.246;        /* gray-100 */
    --color-off-base: 31.41.55;            /* gray-800 */
    --color-text-muted: 229.231.235;       /* gray-200 */
    --color-muted-offset: 209.213.219;     /* gray-300 */
    --color-primary: 147.197.253;          /* blue-300 */
    --color-secondary: 96.165.250;         /* blue-400 */
}
Copy the code

The final result

  • code

By the way play.tailwindcss.com/ must hit Share to save. 😂 I also did not save in practice, eat a pit.

reference

  • www.youtube.com/watch?v=MAt…

  • Css-tricks.com/color-themi…

  • Dev. To/austincrim /…