gistlib - google homepage as a react tailwind component in typescript

To create a Google homepage in React and TailwindCSS, we will use TypeScript and styled-components as well.

First, we need to set up our project by creating a new React app in TypeScript:


npx create-react-app my-google-homepage --template typescript
cd my-google-homepage
84 chars
3 lines

Next, we will install TailwindCSS and styled-components:


npm install tailwindcss styled-components
42 chars
2 lines

After installing the required dependencies, we need to set up TailwindCSS. We can use the @craco/craco package to override the default create-react-app configuration:


npm install @craco/craco
25 chars
2 lines

Then, we will create the craco.config.js file in the root directory:


index.tsx
const { addAfterLoader, loaderByName } = require("@craco/craco");

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const { isFound, match } = loaderByName("babel-loader", webpackConfig);
      if (isFound) {
        const babelLoader = match.loader;
        addAfterLoader(webpackConfig, babelLoader, {
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          loader: require.resolve("babel-loader"),
          options: {
            plugins: [require.resolve("react-refresh/babel")],
          },
        });
      }

      return webpackConfig;
    },
  },
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
};
687 chars
27 lines

This configuration uses the babel-loader and adds the react-refresh/babel plugin for Hot Module Replacement (HMR) support. It also adds the TailwindCSS PostCSS plugin.

Next, we will create a tailwind.config.js file in the root directory:


index.tsx
module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {},
  variants: {},
  plugins: [],
};
189 chars
9 lines

This configuration uses the 'just-in-time' (JIT) mode for faster builds and smaller CSS files. It also purges unused CSS classes in production.

Now, we're ready to start coding. We will create a components folder and add a new file GoogleHomepage.tsx. Then, we will import the styled-components library and create our styled components:


index.ts
import styled from 'styled-components';

const Container = styled.div`
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Form = styled.form`
  display: flex;
  border: solid 1px #dfe1e5;
  border-radius: 24px;
  max-width: 600px;
  width: 100%;
`;

const Input = styled.input`
  border: none;
  outline: none;
  width: 100%;
`;

const Button = styled.button`
  background-color: #f8f9fa;
  border: none;
  border-radius: 0 24px 24px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  transition: all 0.3s ease;

  &:hover {
    background-color: #ea4335;
    color: #fff;
  }
}
`;
684 chars
41 lines

We created four styled components: Container, Form, Input, and Button. Container is a flexbox that centers its children both horizontally and vertically. Form is a flexbox with a border and some border radius. Input is an input field with no border or outline, and Button is a button with a red background that changes to white on hover.

Now, we will create the GoogleHomepage component and use our styled components:


index.ts
import React from 'react';

const GoogleHomepage: React.FC = () => {
  return (
    <Container>
      <Form>
        <Input placeholder='Search Google or type a URL' />
        <Button>Google Search</Button>
      </Form>
    </Container>
  );
}

export default GoogleHomepage;
278 chars
15 lines

Finally, we will import the GoogleHomepage component in our App.tsx file and render it:


index.ts
import React from 'react';
import GoogleHomepage from './components/GoogleHomepage';

const App: React.FC = () => {
  return (
    <GoogleHomepage />
  );
}

export default App;
178 chars
11 lines

That's it! We created a basic Google homepage using React, TailwindCSS, and styled-components in TypeScript.

google homepage as a react tailwind component in typescript

similar typescript code snippets

related categories