I am using Tailwind CSS to build a landing page that I have divided into sections. I want to use a background image on the particular <div> so that it only shows up in that section. I also plan to put a button and text box on top of it.
My attempt is just not working. I tried using url() in both a Tailwind bg class and a normal React style prop, but neither version works.
Using the React style prop:
import React from 'react'
import image from '../../public/images/Rectangle 37.png'
const ReadySection = () => {
return (
<div
className="border-solid border-2 border-sky-500 h-[300px]"
style={{backgroundImage: `url(${image})`}}
>
</div>
)
}
export default ReadySection
Using the Tailwind utility class:
import React from 'react'
const ReadySection = () => {
return (
<div className="bg-[url('frontend\public\images\Rectangle 37.png') border-solid border-2 border-sky-500 h-[300px]">
</div>
)
}
export default ReadySection
I'm using create-react-app and named the app "frontend", so the path of the image is:
frontend/public/images/Rectangle 37.png
The path of my ReadySection component is:
frontend/src/components/ReadySection.js
Related
I tried to import a simple picture for my chrome extension and I got that :
(!) Plugin typescript: #rollup/plugin-typescript TS2307: Cannot find
module '../img/intro.png' or its corresponding type declarations.
src/pages/popup/App.tsx: (2:18) 2 import logo from '../img/intro.png';
My App.tsx is super simple
import React from 'react';
import logo from '../img/intro.png';
const App = (): JSX.Element => {
return (
<div style={{
}}>
<h1>My App</h1>
<img src={logo} alt="image"/>;
</div>
)
}
export default App
I based my app on this repo : https://github.com/rossmoody/ts-extension-starter?ref=reactjsexample.com
If I use require instead the picture doesnt show (my extension is just the little black square:
In typescript , Module Resolution resolves the import using only the files with extension: .ts .tsx or .d.ts.
a simple trick to fix this error :
instead of : import logo from '../img/intro.png';
use : const logo = require("../img/intro.png") ;
I try to create my own react component library based on tailwind CSS.
I start with a simple button component
import * as React from 'react'
interface Props {
text: string
onClick?(): any
}
export const Button = ({ text, onClick }: Props) => {
return (
<button onClick={onClick} className='bg-primary-500 rounded-md'>
{text}
</button>
)
}
I push it on npm : https://www.npmjs.com/package/tailwind-lib-quentin
Then I create a simple React app that use this package
import "tailwind-lib-quentin/dist/index.css";
import { Button } from "tailwind-lib-quentin";
function App() {
return (
<div className="App">
<Button text="Test" onClick={() => console.log("ok")} />
<div className="w-full h-40 bg-primary-500">Bonjour</div>
</div>
);
}
export default App;
as you can see I import the css of my package that extend tailwind but my components are not styled at all.
The button work but I can't see any style on it and I don't get any errors.
Here is reproductible example on Codesandbox : https://codesandbox.io/s/frosty-sea-1y879
here is the package repository : https://github.com/quentin-bardenet/tailwind-lib-quentin
I have local icons, and I add icons in build folder like screenshot below, then I was import icons like that import {ReactComponent as MyIcon} from "build/icons/my-icon.svg";, but still say "Can't resolve 'build/icons/my-icon.svg'", any idea?
Screenshot:
you need to use file-loader
and when you import dont use brackets since its default export just chose the name directly
import myIcon from "build/icons/my-icon.svg";
const App = () => {
return (
<div className="App">
<img src={myIcon} />
</div>
);
}
Svg tag
second option would be to extract the svg tag and put it directly into you component ,
const App = () => {
return (
<div className="App">
<svg .... // copy the content of your .svg
</svg>
</div>
);
}
I would like the content editor to define the primary colors of the website via Headless CMS,
using NextJS with preferable sass modules. Here is an example of it's purpose to give you an idea of what I'm trying to achieve
// style.module.scss
import fromHeadless './api/MyHeadlessCMS'
$color_primary: ${fromHeadless.primaryColor}
$color_secondary: ${fromHeadless.secondaryColor}
$color_text_body: #000;
.title{
color:$color_primary
}
.paragraph{
color:$color_text_body
}
See ${fromHeadless.primaryColor}
// Mycomponent
import style from 'style.module.scss'
const MyComponent = () => {
return(
<div>
<h1 className={style.title}>Hey hey</h1>
<p className={style.paragraph}>Something good</p>
</div>
)
}
export default MyComponent
So I know it is not possible to import js into a scss file, but I'm just trying find a solution with the outcome of using a dynamic scss/css variable defined outside of the sass file.
I am decently new to react and am now trying to add semantic ui to my website. Every time I try to load the components they show as regular html instead of how semantic ui is supposed to look.
Here is an example of a class I am exporting:
import React, { Component } from "react";
import {Radio} from 'semantic-ui-react';
const RadioExampleToggle = () => <Radio toggle />
class Contact extends Component {
render() {
return (
<div>
<h2>DEMO PAGE</h2>
<p>Just a demo.
</p>
{RadioExampleToggle()}
</div>
);
}
}
export default Contact;
This will show up as a regular radio button which is what I find weird. How do I get it to display the semantic UI versions.
Please try import CSS file from semantic-ui.
import 'semantic-ui-css/semantic.min.css'
Try this:
Put it in your index.js
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
Doing it this way will also help you when your app offers theme switching functionality.
code sample