helixml / docs

Tailwind CSS Integration - helixml/docs

To use Tailwind CSS for styling in the helixml/docs project, you need to follow these steps:

  1. Install Tailwind CSS

You can install Tailwind CSS using npm or yarn. Here’s how to do it using npm:

npm install tailwindcss
  1. Generate a configuration file

After installing Tailwind CSS, you can generate a configuration file by running:

npx tailwindcss init

This will create a tailwind.config.js file in your project directory.

  1. Create a CSS file

Create a new CSS file (e.g., styles.css) and import Tailwind’s base, components, and utilities styles:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
  1. Configure the theme color classes

Tailwind CSS uses a hx- prefix for theme color classes. To configure these colors, you can modify the theme section in the tailwind.config.js file:

module.exports = {
theme: {
extend: {
colors: {
'hx-primary': '#0070f3',
'hx-secondary': '#7950f2',
'hx-accent': '#ff6347',
// Add more colors as needed
}
}
}
}

Now you can use these colors in your HTML files like this:

<div class="bg-hx-primary text-white p-4">This is a primary color box.</div>
  1. Compile your CSS

To compile your CSS, you can use a tool like PostCSS. Here’s how to do it using npx:

npx postcss styles.css -o output.css

Replace styles.css with the name of your CSS file and output.css with the desired output file name.

For more information, you can refer to the following resources: