Made withSolidJSClip

Solid JS Tutorial #4 - Global Styles & Tailwind

N

Net Ninja

Creator on the SolidJS channel

Watch on YouTube ↗

17K viewsApr 6, 20239:09 runtime

Learn various approaches to styling your SolidJS applications, from basic global CSS stylesheets to more advanced setups. This tutorial demonstrates how to define and apply global styles for UI elements like buttons in a shared `index.css` file. It then provides a step-by-step…

Chapters

#solidjs#clip#frontend

Key Concepts for Styling in SolidJS

This document outlines the core concepts for styling SolidJS components, focusing on global styles and integrating the Tailwind CSS framework.

Styling Approaches

SolidJS is flexible and supports multiple styling strategies:

Inline Styles: Applying styles directly to elements.
Global Stylesheet: Using a central CSS file (like index.css) for styles accessible throughout the application.
CSS Modules: Scoping styles to individual components to prevent conflicts.
Third-Party Libraries: Integrating frameworks like Bootstrap or Tailwind CSS.

Global CSS Styles

Global styles are ideal for defining the look of common, reusable UI elements like buttons, forms, or a baseline typographic scale.

Example: A .btn class was created in index.css to define a consistent button style.
Application: The class is applied to elements in components using the standard class attribute.

Note
Unlike React, SolidJS uses the standard class attribute for applying CSS classes, not className.

Integrating Tailwind CSS

The video demonstrates a step-by-step process for adding Tailwind CSS to a SolidJS project:

Install Dependencies: Install tailwindcss via npm.
```
npm install -D tailwindcss
```
Initialize Config: Create the tailwind.config.js file.
```
npx tailwindcss init
```
Configure Content Paths: Update tailwind.config.js to tell Tailwind where your component and HTML files are located.
```
content: [
  './src/**/*.{js,jsx,ts,tsx}',
  './index.html',
],
```
Add Directives: Add the core Tailwind directives to the top of your global CSS file (src/index.css).
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Important
After installing and configuring Tailwind, you must restart your development server for the changes to take effect.

Applying Tailwind Classes

With setup complete, you can use Tailwind's utility classes directly in your JSX to style elements rapidly.

Layout: Use container and mx-auto for a centered, max-width layout.
Grid: Create responsive grids with grid, grid-cols-{n}, and gap-{n}.
Component Styling: Style individual components with classes for background (bg-white), padding (p-4), text alignment (text-center), borders (rounded-md), and shadows (shadow-md).

Using the `@apply` Directive

Tailwind's @apply directive allows you to compose utility classes within your own custom CSS rules. This is useful for abstracting common utility combinations into a single, reusable class.

Example: The global .btn class was refactored to use @apply instead of standard CSS properties.

/* Before */
.btn {
  background-color: orange;
  padding: 10px 15px;
  /* ...other properties */
}

/* After */
.btn {
  @apply bg-amber-600 py-2 px-3 text-white rounded-md;
}

Introduction to Styling in SolidJS

All right then gang, so now we know about how to work with components a little bit, let's try adding some styles to them so they don't look so bad. Now in solid.js, you can style your templates in a lot of different ways. We can use inline Styles if we want, we can use the global style sheet right here, the index.css file. We could use CSS modules to scope styles to specific components, or we could just organize our Styles into different CSS files and import them where we need them, but they would still essentially be global, they wouldn't be scoped.

And on top of that, you could use third-party CSS libraries like Bootstrap or Tailwind if you wanted to. So there's many, many different ways to approach this and I just want to focus on a couple of ways for this series because I don't want to get too distracted with CSS. So the way we're going to look at it is we're going to use a global style sheet for any Global UI elements like buttons or something. And then we're also going to install Tailwind CSS as well, which is going to make styling our different components really easy because we can just use Tailwind's utility classes to do it.

We will also be seeing how to add conditional classes to elements as well, so that they can be styled differently dependent on certain conditions. And maybe in the future, I will do a video at some point about using CSS modules with solid too. Anyway, let's start by going to the global style sheet, index.css, and we'll just edit that a little bit.

Creating Global Styles in 'index.css'

So let me get rid of all this junk first of all and we'll start off with a brand new body selector. The margin for this is going to be 40 pixels, and then we'll also give this a background-color property which is going to be light gray, DDD.

Alright, so after that, I want to make a selector called button or .btn, and this is going to be for any elements that we want to make look like a button. And inside here, we'll say the background-color is going to be orange, and then we'll say, for example, the padding will be, I don't know, 10 pixels in the y direction and then maybe 15 pixels in the x direction. We'll also give this a margin, and it's going to be 10 pixels top and bottom, 0 left and right. The display is going to be inline-block, and then we'll say it's going to have white text, so color is going to be white. We'll also say that the border-radius is going to be about 5 pixels, and we'll... also, in fact, that'll do for now. We can change this later, it doesn't really matter. I just want to make some global styles, and the reason this is going in the global style sheet is because we might use this button later on in different pages, in different components, so it's not going to be for one specific component, right?

Applying Global Styles to a Component

So then now we have this class let's make a button somewhere and let's go to the card components and let's add a button right here that says 'Click me!'. We need to give it that class. Now notice we don't need className like in React, we can just use class like so, and the class is going to be btn.

All right so, fingers crossed this doesn't look terrible. Let's go over here. Okay and now we can see this button right here. Let's get rid of that border because it doesn't look good. Let's open up the, oops not that one, index.css. We'll say the border is going to be two pixels and it's also going to be orange like so. Save that. Okay, looks a bit better. Cool.

Okay, so now we've styled these buttons. I think to be honest we don't need to put anything else in a global style sheet for now. So now what I'd like to do is show you how to install telwyn CSS.

Installing & Configuring Tailwind CSS

So I'm just on the Tailwind doc right here and if you go to guide and then solid.js, it's going to show you how to install Tailwind with solid JS. So this is just starting up a new solid.js template, which we've already done. And then down here we have to install Tailwind like this. And then we have to use npx tailwindcss init to create a Tailwind config file. So we'll copy those two commands right here. And then after that, we need to insert this stuff into the content array inside the Tailwind config file. And then after that we have to put these three directives inside our Global index CSS file.

So let's go back to the project and open up a terminal. And I'm going to cancel out of the process first of all, and I'm going to paste in these two commands. So npm install tailwind and then npxel wins CSS init. Press enter, it's going to do both of those things for us hopefully. All right, cool. So now we can cross this off. We should see down here the Tailwind config file, which we do. So the next step is to come down here and grab this thing and copy it, and we want to paste it inside here. All right, good. And then we want to grab those directives, these core directives, copy them and we want to go to our index CSS file and at the very top we want to paste those in.

All right so now we've done that, we can start up the dev server again. So let me just clear this to get some room, press up a few times, npm run dev, just to start up the server. And once we've done that, now we can start to use the different Tailwind utility classes in this project.

Styling the App Layout with Tailwind

Now this is not going to be an in-depth Tailwind tutorial. If you want to learn more about Tailwind, I've got a whole course about that, so I'll leave the link down below the video you can check that out. But what we will do now is use some of these classes in our different components.

Okay, so let me first go to the app component right here. So for this div we'll apply some classes, some of these utility classes. The first one is going to be container to bring everything into a central column. And then margin-auto so that means that we're now going to have a central column of content. And again, don't worry too much if you don't understand these Tailwind classes. This is purely just to make it look a little nicer in the browser. I'm sure you're here to learn Solid and not Tailwind. I just want to quickly run through this to make it look okay.

Okay, so after that, we'll come down to the image. We'll give this a class and inside here we will say rounded-md. So that's the medium strength that gives it a border-radius. And I think that will do for that.

Down here will surround all of these things with a div because I want to output these in some kind of grid. So I'm actually going to copy all these now and paste them in here. And then for this div we can apply some classes. The first one is going to be grid that displays as grid. Then we say how many columns by saying grid-cols-4, even though there's only three items. And then the gap between those items, strength 10. And then margin in the y direction for each, or rather just for this thing is going to be a strength 4.

Okay so if we preview this so far, let's take a look at that. Okay it's not working so let's refresh. Hopefully. Okay no. Let's go down here and I think we've opened this up on a different port. So let me change this to zero and press enter. And yep, now this is working. So we can see these have rounded corners over here, this banner, and also this is in a grid now.

Styling the Card Component with Tailwind

Now the cards themselves don't look great so let's go and apply some classes to the card component. Let's open that up.

All right, so let's come to this div which is the card itself. Give this some classes. So first of all a background of white, bg-white, then p-4 for some padding, text-center, and rounded-md to give it some border radius again. Then also we'll give this a shadow, a box shadow, medium strength. And I think that will pretty much do. Let me save that and now we have some nicer styles for those cards. Awesome.

Using Tailwind's @apply Directive

Now there's one more thing I want to show you and that is how we can basically just apply some classes in the CSS file itself. So let's go to index.css and you see how we have these regular CSS properties right here. Well instead of that what we can do is use @apply and then we can basically have a list of different classes that we want to apply to this. So the classes we've been using so far, for example. So I'm going to paste those in and it's like this. So we have bg-amber of strength 600, py-2, px-3, my-2... so margin and padding, inline-block, text-white, rounded-md, border-2, and border-amber-600. So we're basically now not using those default CSS properties but instead applying some different Tailwind classes to the selector.

So let me save that and preview, and now we can see the buttons still look okay but we're just applying them this different way, the styles. All right. Cool then. So I think now we have pretty much done everything we can do with the styles. I think what we'll do is move on to the next lesson now where we're going to look at how we can pass props into components.