Use tailwind #apply in CSS modules in Next.js - next.js

I've setup tailwind with my Next.js site as per the official guide here: https://github.com/tailwindcss/setup-examples/tree/master/examples/nextjs
However, when I try and use the #apply method, in a CSS module on a component level, eg:
.container {
#apply rows-span-3;
}
I get the following error:
Syntax error: #apply cannot be used with .rows-span-3 because .rows-span-3 either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .rows-span-3 exists, make sure that any #import statements are being properly processed before Tailwind CSS sees your CSS, as #apply can only be used for classes in the same CSS tree.
This is my postcss.config.js:
const purgecss = [
'#fullhuman/postcss-purgecss',
{
content: ['./components/**/*.jsx', './pages/**/*.jsx'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
},
]
module.exports = {
plugins: [
'postcss-flexbugs-fixes',
'postcss-import',
'postcss-mixins',
'postcss-calc',
'postcss-extend',
['postcss-color-mod-function', {
importFrom: [
'./assets/styles/vars.css',
],
}],
['postcss-preset-env', {
stage: 1,
preserve: false,
importFrom: [
'./assets/styles/vars.css',
],
}],
'tailwindcss',
'autoprefixer',
...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
'postcss-nested',
],
}

I manage to make it work using this example
link to tailwind doc
From the doc:
You have this module css
/*Button.module.css*/
.error {
#apply bg-red-800 text-white;
}
Component file
//Button.js
import styles from './Button.module.css'
export function Button() {
return (
<button
type="button"
// Note how the "error" class is accessed as a property on the imported
// `styles` object.
className={styles.error}
>
Destroy
</button>
)
}
From the example, please notice the use of className={styles.error} instead of className="error"

Related

Nextjs does not load tailwind css classes without re-building everytime

I am using tailwind css in my nextjs project, and have achieved quite so far, though i am facing an issue which is that when i change the tailwind inbuilt className from "bg-fuchsia-600" to "bg-fuchsia-100", the css class doesnt gets applied, but when i run the script
"build-css": "tailwindcss build src/styles/global.css -o public/styles.css"
then the css gets applied, so everytime i change the tailwind inbuilt css class , i have to run this script which shouldnt be the case.
Below is the setup for this
global.css
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
button.css - My custom css file
.button{
color: orange
}
the script extracts file in public folder by the name styles.css
and there i created the main.css file with the following content
#import './styles.css';
#import '../src/styles/button.css';
and then i am using it in the main _app.tsx file
import '../public/main.css'
Now when i render my component
const Login: React.FC<IProps> = (props) => {
const formik: FormikProps<FormValues> = useFormik<FormValues>({
initialValues: {
email: "",
password: "",
},
validationSchema: null,
onSubmit: (values) => {
console.log(values);
},
});
return (
<>
<p className="bg-fuchsia-100 button">hello</p>
<Navbar />
</>
);
};
export default Login;
for the P tag, the className "button" which is my custom css, the change is reflected in the browser ,but for the tailwind inbuilt classname bg-fuchsia-100 i had to run the script again to make it working if i change it to bh-fuchsia-500 or anything
tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: "#fff",
},
},
},
plugins: [],
};

SvelteKit Unused CSS selector warning in VS Code

How can I remove VS Code Unused CSS selector warning? This warning is in all files where i use <style lang="scss">. I know that I don't use .btn class in some components, but I want this class as global css.
my svelte.config.js:
const config = {
onwarn: (warning, handler) => {
const { code, frame } = warning;
if (code === "css-unused-selector")
return;
handler(warning);
},
preprocess: [
preprocess({
defaults: {
style: 'scss'
},
postcss: true,
scss: {
prependData: `#import 'src/scss/global.scss';`
}
})
],
};
Please can someone help me?
If you use prependData that means you add the import to every component where you use styles. This is not what you want, therefore remove this setting. What you want is to import this file once so it's available globally. This can be done by just importing it inside the script tag, SvelteKit (or rather: Vite) can handle style imports.
Inside your root __layout.svelte file, add
<script>
import 'path/to/your/global.scss';
</script>

React Build Tailwind Not Including all classes

So I'm making an App with React 17, tailwind and craco and its works find in dev but when i build with craco, tailwind don't include classes as h-36, h-44, col-span-1...
That's my tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
There are some things that you should check:
Make sure that you put the tailwind classes in className attribute instead of class attribute
Do not use string concatenation to create class names. So, instead of writing <div class="text-{{ error ? 'red' : 'green' }}-600"></div>, write <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Make sure that all your files are included in the purge command. Since you only specify './src/**/*.{js,jsx,ts,tsx}', this meant that tailwind will only scan what class should not be purged on those files with those extensions. This means that if you use tailwind classes in html files, tailwind will not scan those files. Also the same case if you somehow have files outside of ./src.
For me, I had to ensure that I was including all of the file types in my purge array within tailwind.config.js. Hope this helps someone - mine was missing the .vue files.
My Laravel tailwind purge array now looks like:
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],

On using customize-cra to override antd less variable creates multiple duplicate css files on build

I am using customize-cra to override antd less variable but it creates multiple duplicate CSS files on build.
As mentioned in antd docs https://ant.design/docs/react/use-with-create-react-app#Advanced-Guides
if I use default import of CSS like this
#import '~antd/dist/antd.css';
it produces only 1.5MB(Including my custom CSS) of CSS files after the build.
Then I remove #import '~antd/dist/antd.css';
And i used customize-cra , like this code.
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const overrideVariables = require('./src/styles/overrideVariables');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: overrideVariables,
}),
);
This produces 6MB(Including my custom CSS) for CSS files after the build.
Am I am using it wrong or any other solution for this?
I'd recommend using craco. There is craco-antd plugin that works great and does exactly what you need.
craco.config.js
module.exports = {
plugins: [
{
plugin: require('craco-antd'),
options: {
lessLoaderOptions: {
noIeCompat: true
}
}
}
]
};
And then you can add your variables in antd.customize.less
#primary-color: #1da57a;
#link-color: #1da57a;

How to render activeClassName style for a react-router-dom NavLink rendered within a material-ui button in a typescript environment?

I am learning react and trying to set the style of a react-router-dom NavLink encapsulated inside a material-ui Button. I am using React with Typescript and a custom Webpack build.
The documentation states that this can be achieved by setting the activeClassName property.
In the code listing below I try setting the activeClassName on the button containing the NavLink component.
import * as navbar from './NavBar.css';
const NavBarLinks = () => (
<>
<Button
color="inherit"
component={NavLink}
activeClassName={navbar.highlighted}
to="/about"
>
About
</Button>
</>
);
The highlighted css class is as follows:
.highlighted {
border-bottom: 3px solid rgb(174, 185, 28);
}
However, no bottom border is rendered. How do I get the activeClassName style to render for a react-router-dom NavLink rendered within a material-ui Button within a Typescript environment?
My build environment is configured as follows.
I have created a type declaration file for the stylesheet
and saved this in a folder referenced in tsconfig.json.
export const active: string;
export const horizmenu: string;
export const highlighted: string;
My tsconfig.json includes the typesRoot configuration. This references the types folder where my css type declaration file is stored:
"typeRoots": ["node_modules/#types", "src/types"]
My webpack development configuration is using css-loader to bundle css files under src/app/*/
{
// link css modules
test: /\.css$/,
include: path.resolve(constants.dir.SRC, 'app'),
use: [
{ loader: require.resolve('style-loader') },
{
loader: require.resolve('css-loader'),
options: {
modules: {
localIdentName: '[path][name]__[local]___[hash:base64:5]',
},
importLoaders: 1,
sourceMap: true,
},
},
],
},
...
When I perform a Webpack development build I can see that the NavBar.css contents are picked up by the css-loader and embedded as a string in the bundle file.
What you have should work, but you are passing a class name, not a style, so I think you just need to make your activeClassName prop equal to "highlighted".
<Button
color="inherit"
component={NavLink}
activeClassName="highlighted"
to="/about"
>
About
</Button>
You'll also need to add !important to you style so it overrides the CSS of the Material UI button.
Working codesandbox link

Resources