Profile Card Component using Tailwind CSS

Community feedback

• 

  John Mirage•1,590

  @john-miragePosted about 2 years ago

  Tailwindcss is a good choice.

  In your project, i see that you did not use the configuration file. If you want to continue your journey with tailwindcss, i strongly recommend that you set a nice config before begining the project.

  The code below give you an example of a configuration made for a frontend mentor challenge.

  • If you dont need the default tailwindcss values for a property you can replace them in the theme object. (e.g. For my project i replaced the tailwindcss default colors with mine because i dont need the tailwindcss colors).
  • If you need the default tailwindcss values for a property but you want to add more values, you can declare them in the extend object. (e.g. i extended the font family stack by adding 2 custom font family)

  /** @type {import('tailwindcss').Config} */
  const defaultTheme = require('tailwindcss/defaultTheme');
  
  module.exports = {
    content: [
      "./index.html",
      "./src/**/*.{vue,js,ts,jsx,tsx}",
    ],
    theme: {
      screens: {
        "sm": "375px",
        "md": "768px",
        "lg": "968px",
      },
      colors: {
        "transparent": "transparent",
        "bright-orange": "hsl(31, 77%, 52%)",
        "dark-cyan": "hsl(184, 100%, 22%)",
        "very-dark-cyan": "hsl(179, 100%, 13%)",
        "transparent-white": "hsla(0, 0%, 100%, 0.75)",
        "very-light-gray": "hsl(0, 0%, 95%)",
      },
      minHeight: {
        "48": "3rem",
      },
      fontSize: {
        "15": ["0.9375rem", { lineHeight: "1.5625rem" }],
        "15-button": ["0.9375rem", { lineHeight: "1" }],
        "40": ["2.5rem", { lineHeight: "1" }],
      },
      fontWeight: {
        "400": "400",
        "700": "700",
      },
      borderRadius: {
        "8": "0.5rem",
        "full": "9999px",
      },
      extend: {
        fontFamily: {
          heading: [
            'Big Shoulders Display',
            ...defaultTheme.fontFamily.sans,
          ],
          body: [
            "Lexend Deca",
            ...defaultTheme.fontFamily.sans,
          ],
        },
      },
    },
    plugins: [],
  }
  

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Yaika Race, Congratulations on completing this challenge!

  Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

  Your solution its already good, something you can do to improve the card responsiveness is create a media query for the stats section and make each stat number stay in a different row after max-width: 350px using a media query, here's the code for that:

  @media (max-width: 350px) {
  .flex {
      display: flex;
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  0