PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

Series of articles:

  • Website Refresh (1)
  • Website Refresh (2)
  • Website Refresh (3)

Reference:

  • Tailwind official documentation
  • Theming Tailwind with CSS Variables

Introduction to the

Adding a new theme to your website during the Spring Festival season can add more New Year atmosphere.

This series of articles introduces how to use Tailwind and CSS custom variables to implement three themes for web pages: Light day mode, Dark night mode, and Tiger Spring mode. The final results are as follows:

🔗 You can view the DEMO at Codepen

💡 it is actually possible to switch the theme of a web page using only CSS custom variables without Tailwind, but for convenience (write less CSS 😝) this series of articles uses Tailwind with CSS custom variables.

  • Tailwind is a CSS framework that provides a number of useful base classes by default, corresponding to the default style, so that you can set the appearance of elements directly in HTML documents through the concatenation of these base classes (using a hyphen), which is very easy and intuitive.

    For example, set the font for the

    element

    <h1 class="text-9xl font-bold text-blue-500">Hello World!</h1>
Copy the code

    Try different base class combinations in Tailwind Playground online editor at 🔗 and see the results

  • CSS custom properties, also known as CSS variables, treat certain style values as values of CSS variables, making it easy to reuse style values and maintain style sheets.

    Variable names are defined with two minus signs — as prefixes, such as –main-color: black

    Then elsewhere in the stylesheet, get the value of the variable through the function var(), such as var(–main-color)

    💡 the selector pointed to by the rule set that defines CSS variables, limiting the visible scope of these CSS variables. If you want CSS variables to be available globally, you can define CSS variables under the root pseudo-class :root selector. If you want to use CSS variables in a specific scope, you can use other selectors.

    :root {
  /* The default theme color is black */
  --main-color: black;
}

.dark {
  /* Dark night theme color is white */
  --main-color: white
}

.tiger {
  /* New Year theme is yellow */
  --main-color: yellow
}
Copy the code

    🔗 canCodepenSee sample code

Environment configuration

There are several ways to integrate Tailwind into a project. You can use the official Tailwind CLI to scan specified files (HTML documents) and compile stylesheets based on the base classes used. Tailwind can also be used as a PostCSS plugin; If a front-end framework is used, Tailwind also provides documentation on how to integrate it into the project.

In this series of articles, the simplest way is to introduce Tailwind through CDN, version V3, which also supports parameter configuration and style customization for Tailwind CSS introduced by CDN.

<html>
  <head> 
    <! -... -->
    <! Use CDN to introduce Tailwind CSS
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      // Tailwind can be configured
      tailwind.config = { 
        theme: { 
          extend: { 
            colors: { 
              clifford: '#da373d',}}}}</script>
    <style type="text/tailwindcss">
      /* You can add custom styles (base classes) */ 
      @layer utilities {
        .content-auto {
          content-visibility: auto; }}</style>    
  </head>
  <body>
    <div class="lg:content-auto"> 
      <! -... --> 
    </div>
  </body>
</html>
Copy the code

The theme color

This series of articles on the different themes of the web page mainly refers to the different color of various elements of the web page.

In order to demonstrate the realization of three themes in this paper, the color system is relatively simple: Light daytime mode theme, Dark night mode theme, Tiger New Year mode theme:

  • HighlightTheme colors can be used as headings, font highlights, etc
  • BgThe background color
    • baseThe overall background color of the web page
    • navThe color of the navigation bar
  • TextThe font color
    • mainThe primary color of the font, used for the text
    • mutedThe color of the font in the Disable button
    • invertColor of the font in the color button
  • FillThe fill color of a button or card, also the theme color
    • mainPrimary fill color
    • mutedThe void button fill color is also the background color of the selected font

🔗 see Figma for specific color values

Among them, the theme of Tiger New Year mode mainly uses yellow and red to show the atmosphere of Spring Festival, referring to the color of Tiger skin and the color of spring in antithetical couplets respectively.

Photo byDominik Lückmannprovide

Photo byHenry & Co.provide