Set up Tailwind and Create a Presentational Component in Remix
There are many ways to style an application. While styling isn’t a focus for this course, we don’t want the application to be unbearable to look at.
TailwindCSS is how you will style this application. With it’s utility classes, Tailwind stays out of the way once you get it set up. The Tailwind docs have a great tutorial which you can follow to get to styling your application. You can also follow along in this tutorial.
Instructor: [0:00] To style this project, you will be using Tailwind. Tailwind gives you access to hundreds of utility classes that enable you to write consistent CSS across your app.
[0:11] To install Tailwind in Remix, you will use the guide at tailwindcss.com. To get started, head to your terminal and let's install some dependencies. You will need to npm install tailwindcss, post CSS, Autoprefixer and Concurrently.
[0:39] Tailwind has a command line initialization utility you can use to get started. Type npx tailwindcss css init -p. This command created two files, tailwind.config.js and postcss.config.js.
[1:01] Next, you will need to open tailwind.config.js in your editor. Here, Tailwind needs to know what files to watch in order to generate the correct CSS classes for you.
[1:14] You can add as many paths to this array as you want. The path that is pasted here will match any JS, JSX, TS, or TSX files in the app folder. Now that the configuration is all set, you need to add npm scripts to run Tailwind in Dev and during the build.
[1:38] The first script will watch the file system and output any styles found in app/styles/app.css. The build CSS script is similar. The difference being it needs to only run once and won't watch your file system.
[1:55] Now that you have commands to build your CSS, concurrently can be used to run the dev CSS and Remix Dev commands in parallel. Finally, the build command is modified to run the build CSS command in addition to Remix build.
[2:12] The last addition you need to make is to add the styles/app.css file. Go ahead and create a Styles folder. Inside of that folder, create an app.css file. You can paste in the default Tailwind directives for each of the Tailwind layers.
[2:29] After all that rigmarole, Tailwind is set up. Head over to your routes index file and you can reference the stylesheet Tailwind generates. In Remix, exporting a links function from a route page allows you to control the different links that are referenced in the HTML header attribute on the page.
[2:52] Export a function called links, then return an array with an object where the route is stylesheet and the href is styles. Looks like an old build is running, so I'm going to kill it and restart to get Tailwind running.
[3:16] Look over at the generated app.css file, and you can see the default CSS. By default, Tailwind will create these reset styles. They will make a web app look more consistent across different kinds of browsers.
[3:31] Head over to the browser to remember what the app looked like before you add a Tailwind. To prove Tailwind is working, apply a couple of classes to the H1 on this page. Head over to the browser and you can see styles are working. It's time to create a simple post component. Create a component's directory.
[3:58] This directory is where all your presentational components will live. Create another folder called post, then create a post.tsx file where the component will live. Since it's annoying to import components/post/post, create an index.tsx file, so that you can just import /components/post.
[4:27] Inside of the post file, create a function called Post. It's going to take a title and children. Export the post component from the post/index file. Head back to your routes index file and we're going to import the post component. The post component is conflicting with our post type, so alias the component as post component.
[5:24] Head over to the browser to make sure that the component is rendering correctly. TypeScript is complaining that we haven't declared a type for a component props.
[5:48] Create a types.ts file and you can define a PropsType. Props will take an optional title of type string or null. Component props without ref is a utility type that React provides. This provides types for all of the possible attributes for the HTML element you pass in as a generic.
[6:13] It looks like there's a mistake with the prop names. The prop title is already defined in component props without ref. To avoid the name collision, rename the component prop to header. It's time to add some styles to our component.
[6:44] First, you'll add some styles for the wrapper div to give all of the text inside some room to breathe. Second, you'll add some header styles to make the title stand out. Lastly, add some styles to the body. This lightens the text color, so it doesn't overshadow the header.
[7:18] Now, if you take a look in the browser, you can see our fancy new post component. Let's review what you've learned. You installed Tailwind CSS, PostCSS, Autoprefixer and Concurrently. Next, you use the Tailwind CSS CLI to generate configuration files.
[7:37] You edited the Tailwind config to add the app files to the Tailwind's watch path. Lastly, you created a new post component that takes a header in children.