Installation

RockSolid is a component library built with SolidJS, Tailwind CSS, and Tailwind Variants.

Follow the steps below to create a SolidJS project, configure Tailwind CSS, and install RockSolid.

Prerequisites

RockSolid requires the following:

• Node.js 18 or later
• SolidJS
• Tailwind CSS
• Tailwind Variants

If you already have a SolidJS project with Tailwind CSS configured, you can skip to Install RockSolid.

1. Create a SolidJS Project

Create a new SolidJS project using Vite:

npm create vite@latest my-app -- --template solid-ts

Navigate to the project:

cd my-app

Install the project dependencies:

npm install

Start the development server:

npm run dev

2. Install Tailwind CSS

Install Tailwind CSS and its Vite plugin:

npm install tailwindcss @tailwindcss/vite

3. Configure Tailwind CSS

Update your vite.config.ts:

import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    solid(),
    tailwindcss(),
  ],
});

Add Tailwind CSS to your global CSS file, for example src/index.css:

@import "tailwindcss";

Make sure your entry file imports the global CSS:

import "./index.css";

4. Install Tailwind Variants

RockSolid uses Tailwind Variants for component styling.

Install it using:

npm install tailwind-variants

5. Install RockSolid

Install the RockSolid component library:

npm install rocksolidjs

6. Import RockSolid Styles

Import the RockSolid stylesheet into your application’s global CSS file:

@import "tailwindcss";
@import "rocksolidjs/index.css";
@source "../../node_modules/rocksolidjs";

The Tailwind CSS import should come before the RockSolid stylesheet.

7. Use RockSolid Components

You can now import and use RockSolid components in your SolidJS application:

import Button from "rocksolidjs/Button";

export default function App() {
  return (
    <Button>
      Click me
    </Button>
  );
}

Setup Complete

Your project now includes:

• SolidJS
• Vite
• Tailwind CSS
• Tailwind Variants
• RockSolid

You are now ready to build your application using RockSolid components.