Column Splitter Operation

When placing Column Splitters for the first time in a new project, they are lined up vertically as shown below. The top area is the Header area, the bottom area is the Footer area, and the middle three areas are actually Column Splitters, so the horizontal alignment is correct.

Place RichText components here.

For each column, I have set each in 3:6:3. The actual code displayed is shown below.

<div class="row component column-splitter basis-full">
  <div class="basis-1/4">
    <div class="row">
      <div class="component rich-text basis-full">
        <div class="component-content">
          <div>
            <span class="ck-content">
              <p>Sample Text 1</p>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="basis-1/2">
    <div class="row">
        <div class="component rich-text basis-full">
          <div class="component-content">
            <div>
             <span class="ck-content">
              <p>Sample Text 2</p>
            </span>
          </div>
       </div>
      </div>
    </div>
  </div>
  <div class="basis-1/4">
    <div class="row">
      <div class="component rich-text basis-full">
        <div class="component-content">
          <div>
            <span class="ck-content">
              <p>Sample Text 3</p>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

What is missing from Tailwind.css is that flex is not applied. Therefore, create the file src/assets/components/ColumnSplitter/index.css and apply it to the following column-splitter.

.column-splitter {
  @apply flex;
}

Then import the created file with globals.css to activate it. In this case, the display will look like this

It still does not work correctly. This is due to the fact that when using Tailwind.css, style sheets that are not listed in the code cannot be used. To work around this, register basis- as salelist in the tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  safelist: [
    {
      pattern: /basis-/,
    },
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

This completes the setup. The actual operation is as follows.

Column Splitter now works correctly.

Summary

In this article, we have introduced a procedure to solve the problem of Tailwind.css tags not working in the standard way. By using this salelist, it is possible to describe the style of Tailwind.css as it is in the site's Style and so on.

Tags

• XM Cloud