Developer Insights
Join millions of viewers! Our engineers craft human-written articles solving real-world problems weekly. Enjoy fresh technical content and numerous interviews featuring modern web advancements with industry leaders and open-source authors.
The CSS / Utility hybrid approach with Tailwind v4
The post concludes with a look at modern CSS and interesting hybrid utility patterns with the Tailwind v4 release...
May 10, 2024
4 mins
Introducing the New SolidJS and Tailwind CSS Starter Kit
We are delighted to announce our SolidJS + Tailwind Starter Kit on Starter.dev to help you build your next project with SolidJS and Tailwind CSS in no time. In this article, we will walk you through the kit, and how it is a great option for building your next project. This kit has been designed to build tiny and optimized web applications on both the JavaScript and CSS sides. It's very useful when the load time of your application's files is critical, like when the internet connection is slow or when you are building a mobile application for a targeted audience. Why SolidJS? SolidJS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you build web applications using a declarative API that you’re already familiar with. It’s a great alternative to React, Vue, and other popular JavaScript frameworks. It’s also a great choice for building static sites. The best feature of SolidJS is how tiny its build bundles are. It helps you ship less JavaScript to the browser. Why Tailwind CSS? Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It makes it easy to build complex UIs without having to write custom CSS. And the best feature of Tailwind CSS is how customizable it is. It helps you ship a very small CSS file to the browser. --- Starter Kit Features - SolidJS - A declarative, efficient, and flexible JavaScript library for building user interfaces. - Tailwind CSS - A utility-first CSS framework for rapidly building custom user interfaces. - Vite - A build tool that aims to provide a faster and leaner development experience for modern web projects. - Storybook - An open-source tool for developing UI components in isolation for React, Vue, and Angular. - Vitest - A fast and simple test runner for Vite. - TypeScript - A typed superset of JavaScript that compiles to plain JavaScript. Tailwind CSS Tailwind CSS makes it easy to build complex UIs without having to write custom CSS. The best feature of Tailwind CSS is how customizable it is. It helps you ship a very small CSS file to the browser. Also, Tailwind CSS is great at scale, so you can add as many utilities as you want. Storybook Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and others. It makes building stunning UIs organized and efficient. It also helps you build components faster, and reuse them in your projects. It also helps you document your components. This kit comes with Storybook pre-configured. You can start using it right away. Why Vite? Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It's a great alternative to Webpack. It's fast and easy to use. It also helps you ship less JavaScript to the browser. It's a great choice for building static sites. This kit comes with Vite pre-configured. You can start using it right away. Testing This kit comes with Vitest pre-configured. Vitest is a tool that is built with Vite in mind from the start, taking advantage of its improvements in DX, like its instant Hot Module Reload (HMR). This is Vitest, a blazing fast unit-test framework powered by Vite. It's a great alternative to Jest. It's fast and easy to use. How to get started? - Run npx @this-dot/create-starter to start a new project from one of the kits in the Starter CLI library. - Select the SolidJS, Tailwind kit from the CLI library options - Name your project - cd into your project directory and install dependencies using the tool of your choice (npm, yarn or pnpm) - Copy the contents of the .env.example file into a .env file When to use this kit? This kit is a great alternative to React and SCSS. It focuses on performance and developer experience by providing a fast and leaner development experience for modern web projects. It also helps you write less CSS, and less JavaScript. Options to scale the kit to fit your needs In this section, we will walk you through the options you have to scale the kit even further to fit your needs. We didn't want to add too many options to the kit in order to keep it simple and easy to use, but we also wanted to provide you with the ability to scale the kit. PWA PWA is a great way to make your app available offline, and installable on mobile devices. It caches your app's assets to make it load faster. It also helps you build a great user experience, and increase your app's engagement by providing push notifications. If you want to add PWA support to the kit, you can use the PWA Vite Plugin to add PWA support to the kit. It covers the PWA integrations for Vite, and the ecosystem with zero-configuration and is framework-agnostic. Conclusion So as we discussed in this article this SolidJS starter kit is a great way to start your new SolidJS project because it has most of the tools you need installed and preconfigured for you from Storybook to Testing, and even the PWA configurations. We hope you enjoyed this article, and we hope you will enjoy using the kit. If you have any questions or suggestions, please feel free to reach out to us on Twitter or Contact form....
Apr 7, 2023
4 mins
Introducing the New Nuxt 2 - Pinia - Tailwind Kit in Starter.dev
*Starter.dev is an open source community resource developed by This Dot Labs that provides code starter kits in a variety of web technologies, including React, Angular, Vue, etc. with the hope of enabling developers to bootstrap their projects quickly without having to spend time configuring tooling. We ship starter kits with showcases to demonstrate how to best utilize these kits, and structure more complex projects.* --- We are excited to announce our new starter.dev kit: a Nuxt 2 kit with Pinia as the state manager, and Tailwind for the styling. Ok, you might be thinking: "Why should I use a Nuxt 2 kit if Nuxt 3 is just around the corner?" Well, although Nuxt 2 is indeed in just maintenance mode by now, it is the most stable Nuxt version out there, and it is still really powerful, and a great framework for you next app. If you want to build a scalable and stable project, you might want to build it in this version! Ok, without any further ado, let’s see what this kit is all about, and how you can use it in your next application! Lets first talk about our technological options. Nuxt So why Nuxt.js? Lets kick off explaining what Nuxt.js actually is, and why we decided to create a kit with this technology. Nuxt is a framework built on top of Vue. It helps you handle complex configuration with an easy command-line setup, such as asynchronous routing with middlewares, great SEO using SSR, automatic code-splitting, auto imports and many more. It also brings its own features, such as build-in components, different ways for getting data from an API, 2 rendering methods (Server-side or Static sites), and even its own loader, transitions, and animations. At first, you might find Nuxt a bit challenging. For example, if you have never used SSR before, it takes time to get used to it, and you will have to change your mindset from Vue as they handle logic quite differently. But we think all that effort will be worth it, because we think Nuxt is a great framework for your next application. It can make your development experience more gratifying and faster, and your site more SEO friendly. Pinia Lets now dive in into the state management library that we choose. As stated from the previous official library Vuex, Pinia is now the default state management library for Vue. When sharing global state within your application, you want it to be secure and easy to use, especially if you are using SSR as we are more likely doing with Nuxt. Pinia is pretty good at helping us with those matters. Using Pinia with Nuxt 2 is a bit tricky but nothing crazy. You just need to install an extra package in order to use Composition-API inside Nuxt 2, make some config adjustments, and then you are good to go! Tailwind Tailwind is a great utility-first CSS framework that helps you build websites more quickly. Nuxt helps us set up Tailwind from scratch pretty easily when creating our project from the command-line. It does the config setups, and also installs the packages we need in order to start using it. What’s inside the Nuxt 2 Kit? Our main goal when creating a starter.dev kit is to provide the essential things for your project without adding too much configuration to make them as flexible as possible. The kit includes two main components. The first one is a counter component, managing the state with a Pinia store and a Fetch component showing how data can be fetched inside Nuxt 2. Both of these components have their own Storybook component, and a test component written with testing library and MSW. These are basic examples to demonstrate how you can utilize these technologies together. The kit also includes ESlint, Prettier and Husky basic configurations. Also, the whole kit is written in TypeScript, which includes configuration within the kit as well. Our goal here is to save you all that time that it would take to get all these tools configured properly when starting a new project. How do I use the kit? With our starter.dev CLI! Of course there are other methods, but this one is for sure the easiest one. Just run the command npx @this-dot/create-starter. After running this command, a list of available starter.dev kits will show up. Of course you can select the best one that fits your needs. In this case, it will be the nuxt2-pinia-tailwind one! It will ask for the name of your new project, and once that is written down, the CLI will start to prepare the kit for you! Now that the kit is installed, you can cd into your new project directory with the name you provided before, and then start coding! Oh, but don’t forget to install the dependencies needed with your package manager of choice (I recommend pnpm 🫣). Take a look at https://starter.dev/kits/nuxt2-pinia-tailwind/ so you can have a deeper view of the kit! Where you can read the README.md file for more detailed documentation, as well as looking at the source code, don't forget to read the package.json file to see the scripts available for the kit. Happy coding!...
Dec 14, 2022
4 mins
Introducing next-react-query-tailwind for starter.dev
*Starter.dev is an open source community resource developed by This Dot Labs that provides code starter kits in a variety of web technologies, including React, Angular, Vue, etc. with the hope of enabling developers to bootstrap their projects quickly without having to spend time configuring tooling. We ship starter kits with showcases to demonstrate how to best utilize these kits and structure more complex projects.* --- We’re excited to announce a new kit and showcase featuring Next.js, React Query, and Tailwind CSS. This kit features some of the most popular tools available in the React ecosystem. We wanted to provide our team and the community with a starter kit that uses these libraries and that also comes setup and configured with all of the common tools and utilities that we use when building a new website or app. These include Jest for unit and component testing, Mock Service Worker for network request mocking, Storybook for a component library, ESlint for linting, and Prettier. It can take a substantial amount of time, when starting a new project, to get all these tools configured properly. So, it was important to us when designing these kits to make them as effortless as possible for users. We’ve started to use this kit at This Dot Labs where it has saved us a lot of time on our projects already. We’re excited to make this kit available to the community as well. The easiest way to get started on your new project with next-react-query-tailwind is to install it via the starter.dev CLI: npx @this-dot/create-starter. This will open a prompt that lists the available starter.dev kits. Select next-react-query-tailwind, provide the name of your project, and the CLI will download the kit for local development. Once you have it installed and cd into your new project directory, it’s as simple as running yarn (or your package manager of choice) to install the packages, and yarn dev to start the Next.JS development server. For more detailed documentation, see the kits README.md file. The starter kit itself is lean. The goal is to provide the things you need for your project and then get out of the way. It includes a Counter component with a co-located component test and a Greeting component that makes an API request with React Query also with a co-located test file. These are just a couple of basic examples to get you started and to help demonstrate how you can utilize testing and Storybook out of the box. If you’re new to this stack or just want to see what a full-scale application built on it looks like, we’ve got you covered. Along with this awesome starter kit, we are also releasing a demo application that we built with it to really show off how you can use it and some good patterns for developing your apps with the tools available in the starter kit. Our demo app is a GitHub clone and it is available on GitHub and viewed at http://next-react-query-tailwind.starter.dev/. For the demo app, we combined React Query with GraphQL using graphql-code-generator which generates TypeScript types for all of our queries in the app. React Query makes the experience snappy by caching the results from all of our GraphQL queries while we use the app. We use Mock Service Worker to mock all of the queries from our application so it can run offline, in Storybook, or in our component tests. We built our GitHub clone using an MVC style architecture in React where we have specific components responsible for fetching and marshaling our data SomeComponent.data, and a view component responsible for rendering it SomeComponent.view. Our Tailwind styles are defined in CSS modules to keep our markup clean and uncluttered. We have our Storybook stories, component tests, and mock api responses co-located with our components in a single directory ie: SomeComponent -> SomeComponent.stories, SomeComponent.test.tsx etc. Here’s an example of the files included in our GitHub clones FileViewer component: These patterns and structures we’ve used throughout our demo app worked really well for us. Everything is nicely organized making it very easy for anyone to jump in and contribute to the project. Remember that this is just an example of how you can use the tools in this starter kit to build out your next (pun intended) application – but our starter kit leaves the door open for you to structure in whatever way fits best with your project’s needs. Have a request or a question about a starter.dev project? Reach out in the issues to make your requests or ask us your questions. The project is also 100% open sourced so feel free to hop in and code with us!...
Nov 8, 2022
4 mins
What's new in Tailwind CSS 3?
Introduction Tailwind CSS has become a very popular CSS framework recently and is loved by developers the world over. It helps developers be more productive, ship incredibly tiny CSS files and focus on one file for each component instead of jumping between several files. Tailwind CSS v3 Tailwind CSS v3 was released at the end of 2021, and it has even more cool features. Just-In-Time Engine "Just-in-time", or @tailwindcss/jit, is a new faster engine to work with on the development mode. Before Tailwind CSS 3, the production was adding every class you may need to the development CSS bundle, and at the end, you would end up with a giant CSS file that could be 15 to 20 MB. The new engine is so much faster. It detects all the classes that you use, and it will update the output file live, so it takes only a few milliseconds to fire up the server. Scroll Snap API Scroll snap is a new feature in CSS that sets how strictly snap points are enforced on the scroll container in case there is one. Tailwind CSS 3 has some new classes to handle that in a very simple way like for: - Scroll behavior: we have to classes scroll-smooth and scroll-auto - Scroll margin: use the scroll-{margin class} like scroll-m-2 or scroll-my-4 - Scroll padding: exactly like scroll margin it’s scroll-{padding class} - Scroll snap align: it’s used to snap every element to a specific direction on scroll like span-start, snap-end and snap-center - Scroll snap stop: it used to force a snap container to always stop/ not stop on an element before the user can continue scrolling to the next item. They are snap-always and snap-normal. - scroll snap type: it used to control how strictly snap points are enforced in a snap container like snap-none, snap-x, snap-y, snap-both etc More Colors The new version contains new 8 colors: sky, blue, indigo, violate, purple, fushia, pink, and rose. So the total now is 15 colors! Colored Box Shadows This is a cool feature you can use the shadow utility shadow-{color}. And we can also change the opacity of the box shadow by using the utility shadow-{color}/{opacity} like: ` Print Modifier It’s a new feature that allows you to control how the page will look when people print it like: ` Colored Underline Styles Also it has new text decoration utility classes to make fancy underline styles to change the text decoration’s color, style, thickness, and offset. These are used to extend the decoration of a text by styling the underline like decoration-{color} is used to set the text underline color and decoration-{solid | double | dotted | dashed | wavy} used to change the text underline’s style. Multi-Column Layout Tailwind CSS 3 supports colums. It’s a new way to handle the layouts, and it’s very useful in things like for example, footer: ` Modern Aspect Ratio API Use the aspect-{ratio} utilities to set the desired aspect ratio of an element like aspect-auto, aspect-square, or aspect-video. RTL and LTR Modifiers Also, we have two new modifiers ltr and rtl to provider good user experience in multidirectional websites. You can use them, like: ` Portrait and Landscape Modifiers Also, we have new modifiers that give us more control over the page, like: ` Wrap Up Thanks for checking out my blog on the latest updates to Tailwind CSS 3. I hope that this will help guide you as you play around with the newest features! Of course, if you want any further clarification, you can reach out to me on Twitter!...
Sep 1, 2022
3 mins
How to Build a Blog with Next.js, Tailwind CSS and MDX
Intro Today, we will build a blog website with Next.js, Tailwind, and MDX without using a CMS at all! What is MDX? MDX is a combination of Markdown and JavaScript. MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. Why will we use MDX? We will use MDX because it’s so powerful, and you can write more interactive articles with it! Also, you will not need to pay any money for a CMS! Let’s Start Here is the project that we will build using Next.js, Tailwind CSS and MDX Blog. First, let’s create a new Next.js project: ` After it’s done, go to the project directory: ` Then, run the dev server: ` Install Tailwind CSS Installing Tailwind CSS with Next.js is simple. First, we need to add some dev dependencies. ` Then, Initialize Tailwind CSS. ` You will find that there are two new files that have been added to the project - tailwind.config.js - postcss.config.js Now, we need to tell Tailwind CSS where to find the classes. Go to tailwind.config.js, and add these lines under content. ` Go to the styles/globals.css and add these three lines: ` And restart the dev server. You will find that the design has been changed like that: That means it has been installed successfully 🎉 Build the Layout We will create a very simple layout. Just add the main content in between a header and a footer. Let's create a new folder called components, and add three new components inside it. - Layout.js - Header.js - Footer.js I'll leave the Header.js and Footer.js to you. Let's start from Layout.js: ` > Important Tip: For some accessibility each page should have one , one , and one . Next Step, we need to wrap the whole application with our Layout.js but how? This is possible in Next.js since the pages/_app.js is a wrapper for the whole app. ` Finally let's go to pages/index.js and delete everything with this code. ` getPosts function We have the layout now! Let's work on the functionality. Create a new folder in the root directory and call it posts. Then, add some articles. Then, create another folder called helpers where we will add most used functions. Create a new file helpers/getPosts.js. After it, we will need to install a package called gray-matter. It's necessary to parse the mdx file content. ` And we will use this package to separate between the frontmatters, and the actual content of each post. We need only three important items in each post: title, date and description. For example: And this is how gray-matter works: ` where data is an object with the frontmatters data and content is the actual post. Second, we need to get a list of all the files inside the posts folder. ` files should return an array with the file names. ` Then, we need to loop through to get each one's data one by one. ` And return allPostsData from the getPosts function. getPost function It's a simpler version from getPosts function, we will pass the slug, and it should return the post data and content. ` Display the posts menu on the home page First, we need to create getStaticProps function on the home page. ` Then, let's get the posts in the page component. ` The post page This is the final step in the project when we will display the posts. In Next.js, to add a page with parameter in its path, you should name it between brackets. In our example, we will add [slug].js in the pages directory. We need to handle things in this page: getStaticPaths: We need this function in Next.js to tell it how many pages should be build in the build time from this page. ` Install next-mdx-remote It allows us to compile the MDX to HTML. ` getStaticProps: ` use MDXRemote to display the post: ` Style the post content After applying all of the above, you will find the post page like this. So we have to style it, install @tailwindcss/typography plugin. ` Then, add it to plugins in tailwind.config.js. ` Finally, add the prose class to the MDXRemote container. Final result: Here, you can find the code for the complete project: Next.js, Tailwind CSS and MDX Blog...
Mar 1, 2022
5 mins
Announcing Angular GitHub Clone for starter.dev showcases
The Engineering team at This Dot Labs loves building open-source software, providing resources to the community, and collaborating with our clients and partners. In cooperation with the Angular team, we have developed an implementation of GitHub’s user interface to deliver a project to the community that demonstrates the power of Angular while providing a fully featured open-source application for developers to use as a learning tool. We’re including this Angular GitHub Clone as part of a new initiative we’re working on called “starter.dev GitHub showcases”, and we are excited about its future. If you want to jump into the code, visit the GitHub repository, or you can check out the deployed application at https://angular-apollo-tailwind.starter.dev/. --- Our Goals Based on the initial projects by Trung Vo (Spotify clone / JIRA clone), we were looking to create an example project that goes beyond the basics of a TodoMVC application and really showcases the power of the technology. Specifically, we wanted to showcase Angular with routing, forms, and global state management. What we built For this project, we utilized Angular v13 with Apollo Client and Tailwind CSS to bring a GitHub user interface to life that features: User login via GitHub OAuth User Dashboard featuring a user’s top repositories and gists for quick access Repositories including file tree exploration, file viewing, issue lists with filtering, and pull requests with filtering User Profiles with near feature parity with the GitHub UI We also created a Serverless Framework based server to manage the OAuth handshake between the application and GitHub servers for security purposes. Why Apollo Client? At This Dot Labs, we love GraphQL, and GitHub has an amazing Public GraphQL API for consumption that we were able to leverage to build all the features in this application. Angular Apollo Client provides us with a GraphQL client and global state management out of the box. Check out our Issues Store to see how we were able to leverage Apollo Client to fetch data from Github and inject it into a ComponentStore for consumption. Why TailwindCSS? Other projects we’ve seen demonstrate how to extend existing component libraries, and we didn’t want to replicate this behavior. Instead, we thought it would be great to demonstrate how to use a CSS utility framework in conjunction with Angular component stylesheets. This afforded us an opportunity to show the Angular community the power of a new tool and further community excitement around a framework agnostic technology that has reshaped the CSS space. Why Serverless Framework? We wanted an easy to use backend ecosystem for any developers wanting to fork and test this application. Additionally, for those looking to deploy this backend, we wanted to find an economical solution. With the serverless-offline plugin, we were able to provide a local first development environment to developers while giving them the ability to ship the API to their favorite cloud hosting provider that supports serverless functions. How to use starter.dev showcases We recommend starting with an exploration of the codebase. To get started, follow these steps: ` In both .env files, you’ll see missing values for GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET. To generate these values, please follow GitHub’s Creating an OAuth App instructions to generate your personal client and secret that you can then input into your .env files. Now, you can run yarn start in both directories and point your browser to localhost:4200 to see the app running. From here, you can start exploring and experimenting with project components. What should I do next? The project README includes several ideas and features that we’ve vetted for feasibility. We’ve given some high level details about the feature and included how difficult we believe it will be to accomplish. We think these are great features to both improve the app and provide you with an opportunity to experience Angular without having to start your own project or find projects that need contributions. New to Angular and want feedback on your approach? Send us a pull request with your changes, and we’d be happy to review it and provide feedback. If it’s the first submission for a particular feature, we’d love to include your change and attribute it back to you. --- We plan on extending starter.dev showcases to include more Angular stacks and examples to give the community even more resources. If you’re interested in contributing to starter.dev showcases or have ideas for new features or showcases, we’d love to hear from you. Our GitHub issues are open for collaboration and pull requests are always welcome, but not required....
Jan 25, 2022
4 mins
How to Create Netflix Clone with React.js, Tailwind CSS and Styled Components
Hello folks. Welcome to this tutorial. We will build a Netflix UI clone with React.js, Tailwind CSS, and Styled Components that looks like this: What is Tailwind CSS? Tailwind CSS is a utility-first CSS framework. Rather than focusing on the functionality of the item being styled, Tailwind is concerned with how it should be displayed. This makes it easier for developers to test out new styles, and change the layout. What are Styled-Components? Styled Components are one of the new ways to use CSS in modern JavaScript. It is meant to be a successor to CSS Modules,and is a way to write CSS that's scoped to a single component without leaking to any other element on the page. Can we use Tailwind with Styled-Components at the same time?! Yes, of course, thanks to the Twin.macro package! It allow us to use both of them at the same time. 😎 Let’s start First, before you start this project, you have to know JavaScript basics and install Node.js on your machine. Let’s start by creating an empty React project! Go to where you want to save your project with the terminal, and type npx create-react-app netflix-ui After it finishes, type code netflix-ui to open the project in your VSCode Open a new terminal in VScode and type yarn start. This will open your browser automatically. Okay now, let's clean up! Go to src/App.js, delete all the code, and replace all the code with this: ` Now it will look like this: Great! Let's add Netflix's colors. Go to src/index.css, and add these style properties in the body. ` Let's install the twin.macro 1. Open a new terminal in VSCode and enter this command ` 2. Next up, we initialize Tailwind. ` 3. Add a new babelMacros key to the package.json file ` Congratulations! You did it🎉 TMDB APIs TMDb.org is a crowd-sourced movie information database used by many film-related consoles, sites, and apps! We will use their APIs to get the movie’s data, and to use their APIs we need to get an API key! Go to themoviedb.org/signup, and create an account. After creating an account log in, go to settings: Then select 'API': And you will find your API key there! Save it, because we will need it in the next step: Get movies data and save it in state In this step, we will get all the data we need from TMDB servers, and save it in our app to use it. 1. First, we need to install Axios. This is the library that will handle the API requests for us. Open a new terminal and type: ` 2. Importing axios, useState and useEffect Go to src/App.js, and add the next line at the top of it. ` 3. Next, we need the API URL, key (We got this in the previous step), and the movies endpoints ` We are getting the movies data from TMDB of 6 categories! 4. Initializing the states We will use useState to initialize a state for each movies category. ` Now, our file will look like this: Okay Let's get the data for each category In the App component, we will add useEffect with the next pattern for each movie category. ` Use the same pattern to get the other categories inside the useEffect. Important note: Use only one useEffect for getting data App Components So in this project, we will need to build only three components. - Header - Hero (Which is the banner with a random movie) - Movies (Which is the Movies slider) Let's start with the Movies component Movies component is simple. It's made from three styled components. 1- Go to src folder, and create a new folder in it called components. 2- Inside src/components create new 2 files Movies.js and Movies.styles.js. 3- Go to Movies.styles.js. Let's talk a little bit about using twin.macro We need to import 2 things from twin.macro - styled to use Styled components - tw to use Tailwind CSS classes You can import them with the next line. ` How we will use both of them at the same time? We will use this simple pattern to mix both of them. ` Now Let's back to the Movies component! - MoviesContainer: It only needs the top and bottom margin my with 1 rem. ` - MoviesTitle: It's h2 with bigger font size text-2xl, font weight font-bold, and uppercased uppercase with two rem left, and a right margin: mx-8. ` Okay now let's import them in the Movies.js: ` Add the Movies component function. It accepts two values: title and movies. ` Go to src/App.js and import the Movie component. ` And replace the hello world h1 with our movies component. So we import the Movie component, and passed two props to it: the title, and the movie array state (We will use it later). Now, save the file and look at the browser. Great let's build the MoviesRow now, and render the movies. Go to Movies.styles.js. We need the MoviesRowto be - Flexbox flex - Scrolls left and right overflow-x-auto - Has one rem of margin top mt-4 - Has one rem of padding p-4 - Also we want to hide the scrollbar (Not supported in Tailwind CSS so we will use pure CSS). the result: ` As you can see, we hide the scrollbar in a way that is similar to SCSS because styled components support it. Inside MoviesRow we will put multiple MoviesPoster which is img styled component. MoviesPoster should have: - 0.5 rem margin m-2 - 10 rem width w-40 - Scale when user hover on it (We will use pure CSS) The result: ` Next step, let's import the MoviesRow and 'MoviesPoster' styled components in the Movies.js component, and use .map to render the movies. ` Your Movies.js file should look like this now And if you go to the browser now, you should see this: Let's copy the same Movies component in App.js for the other categories, and change the title and movies: Great, we did it. 😎 Hero component The Hero component is simple: Go to src/components, and create two new files: Hero.js and Hero.styles.js. Inside Hero.styles.js, we need to add the first styled component which is the HeroContainer. HeroContainer should have - Two rem of padding p-8 - Height 80% of the screen's height (we will add it with pure CSS) - Background image (we will add it from props) - Background size cover important (pure CSS) The result: ` And we will pass a background prop to this styled component later. HeroTitle is h1, should have - Bigger text size text-5xl - More font weight font-bold - One rem of margin bottom mb-4 - Margin top of 40% of the screen's height (pure CSS) The result: ` HeroDescription is p, should have - Bigger text size text-lg - Medium font weight font-medium - One rem with margin bottom mb-4 - Width of 45 rem (pure CSS because 45 rem isn't supported in Tailwind CSS) - Max width of 80% of the screen's width (pure CSS) - Line height of 130% The result: ` And finally HeroButton. ` Let's go to Hero.js, and build everything. ` Go to App.js, import it, and pass a random movie in the Hero component ` Now the Hero section is DONE🥳 Header component The Header component is the last component in this project and it's so simple because it's only one styled component. When you scroll down the header background, it should change to black! Go to src/components, and create two new files: Header.js and Header.styles.js. Inside Header.styles.js we need to add the first styled component which is the HeroContainer. HeaderContainer should have - Flex & justify-between. - Fixed to top of the screen. - Z-index value bigger than other elements. - Switch background color based on the dark prop. - Images inside it should have height with two rem. The result: ` Let's go to Header.js, and put the Netflix logo and the Avatar in. ` Finally, Let's add an event listener for the window.scroll using useEffect and useState. ` Now, pass isDark to the Header component. ` Import the Header component in the App.js, and go to your browser. Congratulations! We made it! 🥳 Source Code Also, here is the Github repo....
Sep 29, 2021
10 mins
Getting Started with Tailwind in Vue
Introduction Tailwind CSS has taken the front end development world by storm. If you haven't heard of it yet, Tailwind describes itself as, "a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90, that can be composed to build any design, directly in your markup." Rather than using semantic class names (like "button" or "title"), you utilize these smaller utility classes to build your components. There are many ways to integrate Tailwind within a Vue application. In this article, we'll be talking about a few of the best practices for installing and utilizing Tailwind in a Vue application. Vue CLI Installing Tailwind in a Vue CLI app is probably the easiest experience available. There is a CLI plugin that does everything we need, including installing Tailwind, and configuring PostCSS for us. Even better, it works for both Vue 2 and 3! In your terminal, at the root of your application, run the following command: ` The CLI will then install the plugin. You will be asked how complete a Tailwind configuration file you want (none, minimal, or full). Choose "minimal" for now - it will create the file, but will not populate it with any custom values. Once the terminal has finished, you're done! There are a couple considerations to keep in mind when using this approach: - As of this writing, the CLI plugin has not been updated in a few months. It is currently installing Tailwind version 2.0.2 (the current latest is 2.2.4). This is easy enough to adjust manually, but you need to be aware of it to make the change yourself. - The plugin is also providing the PostCSS 7 compatible build. For the most part, this doesn't make a huge difference. The Tailwind docs notes that the compatibility build is identical with the main build, so you won't be missing out on any features. For now, this should be fine, but it could lead to issues down the road if you want to use PostCSS 8 plugins (or if Tailwind decides to stop providing backwards-compatible builds). If you're using Vue 3.0.6 or greater, you should be able to upgrade to the main builds. However, your should make sure to update all your PostCSS plugins to the latest main builds, not just Tailwind. Vite The Tailwind Docs include instructions on installing Tailwind with Vite. While it isn't as straightforward as the Vue CLI plugin, it's still pretty simple to get started in Vite. First, install Tailwind, PostCSS 8, and Autoprefixer in your repository: ` Then, run the Tailwind CLI command to create a default configuration file for both Tailwind and PostCSS: ` This will create two files: - tailwind.config.js - postcss.config.js Unless you want to make a change to either Tailwind or PostCSS, you won't have to touch these files. The docs recommend that you configure the purge option, which is used by Tailwind to purge its unused styles. With this change, your tailwind.config.js file should look like this: ` Note that we also added the mode: 'jit' key to the configuration. This enables Tailwind's Just-In-Time mode, which is a more performant experience, and enables a number of other Tailwind features. Read the documentation to learn more, and better understand what you're getting out of this. Now, let's create a base CSS file to import Tailwind's classes into. The Tailwind docs suggest using ./src/index.css, but I would recommend creating a separate CSS file just for Tailwind. Let's call it tailwind.css. In that file, put the following: ` This uses PostCSS to import the various classes and utilities that Tailwind uses. Then, we just need to import this file in our main.js file like this: ` And we're done! Tailwind is now available in your Vite application. Make sure to clear out the index.css file of any styles you do not want. In practice, that file will probably be much smaller than you may be used to, but it's still useful to keep your custom styles separate from Tailwind. Nuxt Nuxt has an amazing plugin ecosystem, and there is a Tailwind plugin available for us to use here as well. Unlike with Vue CLI, there's a bit more manual work involved to install a Nuxt plugin, so let's get started! First, make sure your Nuxt application is at least version 2.15.3. This is the release of Nuxt that supports PostCSS 8. Unlike Vue CLI, this plugin provides the main build of Tailwind, not the compatibility build for PostCSS 7. You can upgrade Nuxt by running npm update nuxt. Once you have confirmed that your Nuxt app is ready, run the following command in your terminal: ` This will install Tailwind and its required plugins for you. Then, in your nuxt.config.js, add the plugin to your buildModules: ` Finally, run npx tailwindcss init to create the Tailwind configuration file. And that's it! Tailwind is now ready to go in your Nuxt application. You may notice that there's a lot less work here than in Vite (and a lot fewer files being created than in Vue CLI). With the Nuxt plugin, if you do not have a tailwind.css file where styles are being injected, Nuxt will create it for you (the same is true for the tailwind.config.js file, but typically you'll want that anyway to enable JIT mode, or other custom configurations). Tailwind Viewer One benefit of the Nuxt plugin is the Tailwind Viewer. This allows you to previous the styles currently enabled in your Tailwind configuration, and copy/paste the classes into your UI. By itself this is a great feature, but when you start working with custom colors or other features, it can be invaluable to preview them before adding the classes to your template. Conclusion We've walked through adding Tailwind to a Vue application in three of the most common tools to build Vue applications. In general, the process is the same: 1. Install Tailwind, PostCSS, and Autoprefixer 2. Configure Tailwind and PostCSS 3. Import a CSS file that includes the Tailwind classes to your application If you are using a custom setup for your Vue site, you should be able to apply these steps to your own setup in order to get Tailwind up and running. There are also a number of resources available if you run into any problems, including a Discord server and GitHub Discussions, where you can ask for help from other Tailwind users. A note on utility-first CSS As I'm writing this, I'm aware that utility-first CSS is not for everyone. If that sounds like you, and you made it this far, one thing about Tailwind that isn't highlighted as much as it should be is how the configuration allows for building a coherent design system. How often do you see multiple configuration files for Sass that are nothing but variables ($primary, $red, etc.)? All of this can be handled within Tailwind's configuration file, with the added benefit of generating classes for text, backgrounds, borders, and more to utilize those colors. Also, Tailwind already comes built-in with a number of great design decisions for padding and margin, flexbox, and more, making the work of building a design system that much easier. Also, Tailwind provides a special directive, @apply, that lets you utilize Tailwind classes in standard CSS. This means that, rather than using the utility classes Tailwind provides in your template, you can build out custom classes (like .card or .button) while still benefitting from Tailwind's other features. Even better, using a plugin like PostCSS Nested, you can get nested CSS, just like in Sass or other CSS preprocessors. Conisder the following component: ` This is a fairly simple button, with a background color, padding on width and height, and a hover attribute. Already, we can see a number of other changes to make (add some drop shadow, transitions, different styles for disabled state, and so on). Using purely Tailwind, that could lead to a large number of classes on the button element. Let's say you don't like having those large class attributes, but you still want the other benefits of Tailwind. Here's the same example, using @apply to build a custom .button class: ` Nice! Our template is a lot simpler, and the styles are contained in our style block. That said, most Tailwind users will probably want to go without using @apply (Adam Wathan, the creator of Tailwind, has said that he almost never uses @apply). That doesn't make this any less valid, and is a perfect way to balance to strengths of Tailwind with traditional methodologies of writing CSS like BEM. If you're hesitant to try Tailwind because of its large number of classes, give this a try and see how you like it! And remember, the goal of using Tailwind or any other CSS framework or methodology is to build a stellar experience for your application's users. Don't lose focus of that while deciding whether to adopt Tailwind in your latest Vue application. Try it out, see if it works for you, and decide for yourself whether it fits your project or style of writing CSS. Until next time!...
Jul 19, 2021
7 mins
Getting Started with LitElement and Tailwind
This tooling heavy guide will set you up for a strong start to working with data-driven UI's powered by LitElement, styled by Tailwind's utility CSS classes....
Feb 23, 2021
5 mins
What Can You Do with Tailwind 2?
Tailwind CSS released their new 2.0 version November 18th, 2020 with a spectacular launch trailer and new website redesign. The new version includes a plethora of features including new color palette, ring and form utilities, and dark mode, among others!...
Nov 24, 2020
7 mins
Supercharging Next.js Development with Tailwind CSS
Supercharging Next.js Development with Tailwind CSS When creating a new Next.js project (and in general, any React.js application), choosing a styling solution can be a time-consuming part of the process. While there are plenty of approaches to styling a React.js application, in this case, we are going to use TailwindCSS. Unlike CSS-in-JS solutions that only provide the styling system or component libraries that give you opinionated component styles, TailwindCSS provides you with a set of unopinionated utility CSS classes that your components can leverage to build your User Interface, with the chance of extending them via configuration files. Scaffolding our application > Note: We will use yarn across this guide, but feel free to use npm if that is your personal choice. Let's create a new Next.js application. While there is an official create-next-app CLI tool, we will manually scaffold our project to avoid removing unnecessary files created by it. Create a new directory and cd into it. ` Initialize an empty package.json ` Install required dependencies ` Create a homepage in pages/index.js By default, the Next.js filesystem router will pick all pages created in the pages directory and make them available as routes. pages/index.js ` Add dev, build and start scripts to our package.json package.json ` Now, let's run yarn dev to start your development server and navigate to http://localhost:3000 to preview your unstyled Home page. Configuring TailwindCSS We have a basic web application now, but its lack of styling, colors, and a nice font makes it look boring and lifeless. Install TailwindCSS as a devDependency ` Generate a TailwindCSS config file Run yarn tailwindcss init to create a tailwind.config.js file if you want to later customize the default configuration or add more plugins. Additionally, if you are using the TailwindCSS VSCode Extension, you will get intellisense completions for your class names. Create a Global Stylesheet In order to import TailwindCSS utility classes, we need to create a stylesheet in styles/main.css, where we will use the @tailwind directive to import all the required classes and set up some global styles. ` Import the Global Stylesheet To add a Global Stylesheet, we need to create a custom App and import it there. pages/_app.js ` Configure PostCSS If you run yarn dev and navigate to http://localhost:3000, you will see an unstyled page like the following: This is happening because Next.js doesn't know (_yet!_) what to do with the @tailwind and @apply directives. For that, we will leverage Next.js's built-in PostCSS support to parse our CSS file. Create a postcss.config.js file in your project root with the following code: postcss.config.js ` Now, let's restart our development server to see it working: Adding More Styles Now that our TailwindCSS config is working and PostCSS is compiling, we can start consuming those rules in our app routes. Let's edit our Home Page to make it look better. pages/index.js ` It should look like this: Optimizing Build Result Our Next.js project is successfuly set up to use TailwindCSS 🎉. However, we can still run some optimizations to make it work with all browsers and reduce final CSS file size. Polyfill modern CSS Most modern webapps use modern CSS features that old browsers does not support, and manually covering all cases can be frustrating, time-consuming and pointless since we have tools like PostCSS Preset Env that can automate the process. Install postcss-preset-env ` Add postcss-preset-env as a plugin to postcss.config.js postcss.config.js ` Refer to the postcss-preset-env documentation for more details on how it works and what it solves. Purge unused utility classes If we run the yarn build command, we will notice some warnings from the PostCSS step: ` This is happening because the final build is including all of the TailwindCSS utility classes, which will create a *huge* StyleSheet and we don't want to slow down the page load for our users. Luckily, TailwindCSS config has an option to control the file size that we can leverage by configuring the purge property of our tailwind.config.js file. tailwind.config.js ` By using that configuration, PostCSS will analyze the code within components and pages directories, extract class names and match them with our generated TailwindCSS utility classes. This means the final CSS file will only have the neccessary classes to work and no dead code ✨. Moving forward We have concluded our mini guide on how to Supercharge your Next.js Development with TailwindCSS. Pretty easy, right? I personally think the folks at Vercel have been really working hard to make integrations like this as seamless as possible. If you want to keep digging into the available utility classes, how to customize your configuration, add more variants or even create your own plugins, refer to the TailwindCSS documentation. Also, if you just want a sneak peak on what you can do with TailwindCSS without creating a new project, go to the Tailwind Play tool where you will be able to try it in your browser. If you want a finished code sample, refer to this GitHub repository....
Oct 21, 2020
5 mins
Let's innovate together!
We're ready to be your trusted technical partners in your digital innovation journey.
Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.