I'm combining tailwindcss with another ui framework (Ant Design), but having some conflicts with the css in tailwind.
I want to compile the necessary classnames if it is used to minimize conflicts
My expect example:
<div className="text-center font-bold" />
After compiled in output.css file:
.text-center {
text-align: center;
}
.font-bold {
font-weight: bold;
}
which this output results should not included css default like:
html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}
.text-center {
text-align: center;
}
.font-bold {
font-weight: bold;
}
Just disable Preflight
// tailwind.config.js
module.exports = {
....
corePlugins: {
preflight: false,
}
}
Related
I'm using create-react-app with TypeScript template and trying to implement color variables as follows in a styles/colors.css file:
#value MainBlue: #255EDF;
#value MainOrange: #FF6F4A;
#value MainYellow: #FFD640;
When I go to import them (see below) in a CSS module they are not implementing.
#value MainYellow from '~styles/colors.css';
.homePage {
background-color: MainYellow;
text-align: center;
}
import styles from './homePage.module.css';
const HomePage = () => {
return (
<div className={styles.homePage}>Home</div>
);
};
export default HomePage;
What am I missing in order for these to be applied?
This syntax will do the job!
:root {
--MainBlue: #255EDF;
--MainOrange: #FF6F4A;
--MainYellow: #FFD640;
}
.homePage {
background-color: var(--MainYellow);
text-align: center;
}
<div class="homePage">Home</div>
I'd like to get the CSS file content of a component.
For example:
hello-world.component.ts:
#Component({
selector: 'app-hello-world',
template: `<h1>Hello World</h1>`,
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
getCSSContent(){
}
}
hello-world.component.css:
h1 {
color: red;
font-weight: 400;
}
I expect getCSSContent function to return:
h1 {
color: red;
font-weight: 400;
}
In the folder 'src' add a new file with following name:
typings.d.ts
with the following content:
declare module '*.css';
In your component add:
import helloWorldCss from './hello-world.component.css'
and you can read your css with
getCSSContent(){
return helloWorldCss;
}
I recognized some weird text at the end of the helloWorldCss variable.. maybe you have to trim it.
So I'm just starting to learn React and I'm trying to incorporate a css file to style a react component (ie a sidebar) but I'm not sure why none of the styles show up on the webpage. I've tried inlining css in the index.js file and that works but I'm trying to move all of the styling code into a css file. I have a sass loader and css loader installed and included them in the webpack.config.js file. Am I just forgetting something dumb?
Here's my style.css file
.sidebar {
position: fixed;
height: 200px;
font-size: 20;
width: 60px;
background-color: deepskyblue;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: azure;
}
li {
display: block;
color: gray;
padding: 8px;
font-size: 20;
text-decoration: none;
}
li :hover {
background-color: forestgreen;
}
And my index.js file
import React from 'react'
import {styles} from './style.css'
import Home from './home.js'
export class Sidebar extends React.Component {
render() {
return (
<div className={styles.sidebar}>
<ul>
<li>Home</li>
<li>Test1</li>
<li>Test2</li>
</ul>
</div>
)
}
}
no need to call styles.sidebar as if it were an object, just import the file and assign className as an ordinary class....
import './style.css';
// [...]
<div className='sidebar'>
You mentioned you have CSSLoader in your webpack.config.js file. First, let's confirm that you have something similar to me:
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
Now, every time you run your webpack server, the dev bundle will include your styles in it. With that, you should be able to import css files my referencing them in the React file:
import './MyComponent.css'
const MyComponent = () => {...};
If everything is still the same, but things are still not working, I highly recommend create-react-app, which is a painless solution for you to focus on learning React without bothering so much with configuration details. Create React app includes amongst other things, CSS importing and Jest testing.
I've got this in a global style.css:
:root {
--font: {
font-family: "Source Sans Pro", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
... and this in a react component's style.css:
.rightnav {
#apply --font;
float: right;
color: white;
}
In the component itself:
import React from "react"
import cssModules from "react-css-modules"
import style from "./style.css"
render() {
return (
<ul>
<li className={style.rightnav}>Blog</li>
</ul>
)
}
I get an error: No custom properties set declared for font.
You've got to import the global stylesheet into the local one. Because postcss-apply has no way to know about that global file while parsing the local one. So it's a good idea to have a partial with only custom properties and custom property sets declarations.
You probably want something like postcss-import
#import 'path/to/variables.css';
.rightnav {
#apply --font;
float: right;
color: white;
}
I am using less, postcss and cssnano (version 3.7.3). In less, I am using classes which inherit from a shared base and overriding some of the properties when needed. I am finding that cssnano is reordering the inherited\overridden properties causing unexpected differences in the style.
A trimmed down example .less looks like this:
.cell-label {
font-size: 11px;
}
.heading-label-cell {
.cell-label;
color: #heading-colour;
font-size: 13px;
}
.question-label-cell {
.cell-label;
color: #question-colour;
}
Which is then expanded to css looking like:
.heading-label-cell {
font-size: 11px;
font-size: 13px;
color:#616161;
}
.question-label-cell {
font-size: 11px;
color: #0073d6;
}
But cssnano then does the following which has reordered the font-size property:
.heading-label-cell {
color:#616161;
font-size:13px
}
.heading-label-cell,.question-label-cell {
font-size:11px;
}
.question-label-cell {
color:#0073d6
}
Is there a different way I am expected to do inheritance/overrides that doesn't suffer this problem or is the fault in cssnano?
Reordering CSS properties is not always a safe operation, but it is enabled in the default preset. If you encounter problems, with it, disable it. This optimisation is called cssDeclarationSorter.
For example, the options to call cssnano with:
{
preset: [
'default',
{ cssDeclarationSorter: false }
]
}
Or if you use cssnano as a plugin for postcss, this is postcss.config.js:
module.exports = {
plugins: {
cssnano: {
preset: [
'default',
{ cssDeclarationSorter: false }
]
}
}
}