Talwind CSS is not working with React. I have installed Tailwind CSS as per the documentation (https://v1.tailwindcss.com/docs/installation) and my code is below.
Can someone help me?
Here is my browser pic of the inspect to understand my problem
Here is my package.json file
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"autoprefixer": "^10.4.2",
"postcss-cli": "^9.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"tailwindcss": "^3.0.18",
"web-vitals": "^2.1.4"
},
"scripts": {
"build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/style.css",
"start": "npm run build:css && react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Below is my postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Below is my tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
plugins: [
// ...
require('tailwindcss'),
require('autoprefixer'),
// ...
]
}
Later, I edited my index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
//const App = require("./App");
ReactDOM.render(
<App title="Heyy React Dev Tool"/>, document.getElementById("root")
);
I also edited my App.js like below
import React from "react";
import "./assets/css/style.css"
function App({title}) {
return (
<div>
<div className="bg-gray-600 text-white p-5 border">{title}</div>
</div>
);
}
export default App;
Last but now least these is my style.css file is generated
Style.css
/*
! tailwindcss v3.0.18 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/*
Ensure the default browser behavior of the `hidden` attribute.
*/
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
'```
I've looked at your repo: and even though you said you followed the guide, you didn't. The issue boils down to not really following through the documentation properly.
This line is missing in your tailwind.config.js file, which causes tailwind to fail to detect class usage in all your .js file:
module.exports = {
// You are missing this block that defines what files tailwind should scan for usage
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Once you add this line your CSS should build properly:
Other signs that you didn't follow the guide properly:
tailwindcss is listed as a dependency and not a devDependency
Your tailwind.config.js file appears outdated. Are you sure you ran npx tailwindcss init properly? Are you sure that you are indeed running v3 of Tailwind CSS?
check your index.js file you need to import ReactDom porperlt and also use it properlylike this
import ReactDom from "react-dom";
and this
import ReactDom from "react-dom";
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed last year.
&:hover{
cursor: pointer;
& .background-image {
transform: scale(1.1);`enter code here`
transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
& .content{
opacity: 0.9;
}
}"
like in & .background-image we have space
&.large{
height: 380px;
}"
but we don't give space here
The & always refers to the parent selector when nesting. Think of the & as being removed and replaced with the parent selector.
If you leave a space after & symbol, this means you are now referring to its' descendants if you don't leave a space, this means you refer to your parent itself.
For example
.container {
&.red {
background-color: red;
}
}
In this case, this will apply red background to the .container element, if it also has a red class attached to it in your DOM.
Example 2
.container {
& .red {
background-color: red;
}
}
In this case, it will make the background to be red-colored to any child, which has a .red class inside a .container element.
More details and complex examples here
I am using PostCSS http://cssnext.io/ with my Next.js website combined with butterCMS. I am new to postcss but like what they are trying to do, however coming from a SASS background, I am finding it seems to be going down the rabbit hole of having to add a lot of additional modules and scripts in order to get it working which does not give it a major advantage over preprocessors.
In my package.json I have the following modules:
"postcss-cssnext": "^3.0.2",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^2.0.6",
"postcss-modules": "^0.8.0",
In my root I have a ./styles/ folder with the following files:
defaults.css
:root {
/* Breakpoints */
#custom-media --small (width >= 576px);
#custom-media --medium (width >= 768px);
#custom-media --large (width >= 1200px);
/* Colors */
--color-black: #000;
--color-white: #fff;
--color-vue-green: #42b983;
/* Typography */
--h1: 2rem;
--h2: 1.5rem;
--h3: 1.25rem;
--h4: 1rem;
--h5: 0.875rem;
--h6: 0.75rem;
/* Utilities */
--accessibly-hidden: {
position: absolute !important;
display: block;
visibility: visible;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip: rect(0, 0, 0, 0);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
--foo: {
font-size:4em;
color:green;}
}
styles.css
#import 'defaults.css';
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
h1 { font-size: var(--h1) }
h2 { font-size: var(--h2) }
h3 { font-size: var(--h3) }
h4 { font-size: var(--h4) }
h5 { font-size: var(--h5) }
h6 { font-size: var(--h6) }
.accessibly-hidden {
#apply --accessibly-hidden;
}
.giantext{
#apply --foo;
}
div {
color: var(--color-vue-green);
}
.my-paragraph{
composes: my-paragraph from 'shared.css';
}
.danger{
composes: danger from 'shared.css';
}
In my react script I have:
<p className={classNames['my-paragraph']}>My homepage</p>
<p className={classNames.danger}> This background should be yellow</p>
<div>
<p className={classNames.giantext}> I am huge </p>
</div>
Only the composes directives are working with the remaining utilities and styling not being picked up by my index.js file in next.js. The remainder gives me the following warnings/errors:
(Emitted value instead of an instance of Error) postcss-custom-properties: /Users/user/projects/qubase/styles/styles.css:25:3: variable '--color-vue-green' is undefined and used without a fallback
Or
(Emitted value instead of an instance of Error) postcss-apply: /Users/user/projects/qubase/styles.css:16:3: No custom property set declared for `accessibly-hidden`.
etc
Is there anything about postcss I am missing?
Here is what I've done to get rid of those messages:
I added postcss.config.js file and I added following code in it:
const postcssCssNext = require('postcss-cssnext')
const postcssImport = require('postcss-import')
module.exports = {
plugins: [
postcssCssNext({
features: {
customProperties: {
warnings: false
}
}
}),
postcssImport
]
}
I'm using Atom 1.15.0 on Mac Sierra. I wanted to change the mouse cursor from a thin bar to something more visible, like a block. I opened my styles.less file and added
atom-text-editor .cursor {
transition:opacity 0.5s linear;
}
and then restarted Atom, but my mouse cursor appears as before (a thin line). How do I change it?
Edit: INcluding my styles.less file
/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed and saved.
*
* Add your own CSS or Less to fully customize Atom.
* If you are unfamiliar with Less, you can read more about it here:
* http://lesscss.org
*/
/*
* Examples
* (To see them, uncomment and save)
*/
// style the background color of the tree view
.tree-view {
// background-color: whitesmoke;
}
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);
}
// style UI elements inside atom-text-editor
atom-text-editor .cursor {
transition:opacity 0.5s linear;
}
.editor .cursor {
position: absolute;
border: 1px solid;
background-color: rgba(244,100,122,0.6);
}
atom-text-editor .editor-contents--private { cursor: default; }
I would direct you to this package:
https://atom.io/packages/block-cursor
Also: Changing cursor style of atom editor
Update:
These properties should apply to the mouse cursor as they do with the text cursor. As long as they're directed properly.
Try Adding this to the StyleSheet:
atom-text-editor .editor-contents--private {
cursor: default;
position: absolute;
border: 1px solid;
background-color: rgba(244,100,122,0.6);
}
Insert this into your styles.less
atom-text-editor .editor-contents--private { cursor: default; }
atom-text-editor {
cursor: url(/home/thedude/Pictures/ico/octocat_mini.png), auto;
}
Atom with Octocat mouse pointer
I can confirm that this line allows for the mouse cursor to be changed, but only when in the editor or in search boxes ,etc. The typing cursor is the purple thingie after the } at the end.
I am evaluating PDFreactor to produce PDF from HTML & CSS.
However I have run into a problem - I need to set the page background image different for the 1st and 2nd and 3rd pages of a document section. The only way it seems to be possible (looking in the PDFreactor manual), is to explicitly give the fixed document page number, rather than a number that is relative to the document section.
CSS Generated Content for Paged Media Module suggests I would use this notation;
CSS:
#page:-nth(1 of PPSid1117) {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
#page:-nth(2 of PPSid1117) {
background: url("http://example.com/bg2-section1.png") no-repeat center center;
}
#page:-nth(3 of PPSid1117) {
background: url("http://example.com/bg3-section1.png") no-repeat center center;
}
#PPSid1117 {
page: PPSid1117;
}
HTML:
<div id="PPSid1117">Up comes 10 pages of lorem ipsum, the first three pages having different backgrounds... etc etc ...end of section.</div>
But it does not work at all - it throws a parse error;
Parse error in resource "main_css.php?doc=50"
Encountered '1' at position 11 in rule '#page:-nth(1 of PPSid1117)
BTW, -ro-nth DOESN'T throw an error but still does not work - ie.
#page:-ro-nth(1 of PPSid1117) {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
This code puts the it on every left page of the section (so it proves the named page selector works at a basic level) but is not what I want at all.
#page PPSid1117:left {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
This works but it means I have to hard-code the page number. Not what I want to do...
#page:-ro-nth(4) {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
This puts it on page 1 of the document, not page 1 of the section.
#page PPSid1117:-ro-nth(1) {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
This does what I want in Prince XML.
#PPSid1117 {
page: PPSid1117;
prince-page-group: start;
}
#page PPSid1117:nth(1) {
background: url("http://example.com/bg1-section1.png") no-repeat center center;
}
Does anyone have any helpful suggestions? Thanks.
If you want to set a background to the first, second and third page it is as simple as defining
#page :nth(1) {
background: url(path/to/img) 0 0 no-repeat;
}
#page :nth(2) {
background: url(path/to/img) 0 0 no-repeat;
}
#page :nth(3) {
background: url(path/to/img) 0 0 no-repeat;
}
This definitely works with PrinceXML and if PDFReactor works with the W3C specs it should work too.