So I was working on Login page using next.js as framework.
I did some simple designs using react for some texts but it is not showing on browser. It may be that it is not imported.
I don't see any error on console so I'm having trouble with finding what the problem is.
I can check on the inspector the classnames for these texts so I'm really puzzled why this is not reflected on the browser.
Does anyone know what the problem is or have had the same experience?
Thank you in advance.
the files looks like this:
It is my belief that the problem lies with your Tailwind installation. Kindly verify that Tailwind is installed correctly. On occasion, issues such as this can arise due to an issue with the Tailwind configuration file (tailwind.config.js). If the content routes are not added correctly, it may work in some components but not others.
content: [
"./components/**/*.{js,ts,jsx,tsx}",
"./widgets/**/*.{js,ts,jsx,tsx}",
"./shared/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./hook/**/*.{js,ts,jsx,tsx}",
],
Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Related
i try to load the SASS for my Gatsby Project but if I check the source code of the web there isn't any classes from my sass.
I am a bit confused and I followed the documentation of Gatsby.
Nothing worked so my last chance is SO.
// gatsby-config.js
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-fontawesome-css',
'gatsby-plugin-sass',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'assets',
path: `${__dirname}/static/`,
},
},
]
Here I import the style.
/**
* Add browser relation logic.
*/
require('./style/global.js');
import './style/sass/index.scss';
I followed the gatsby-plugin-sass documentation and I should be all set. After restarting the server and show source-code of my app there is now class name from my sass file.
Best Regards
Knome
I didn't integrate in any component. Because if I see the Source code
of chrome then there should be scss be loaded.
Ok, well... The SCSS is loaded as it should but the styles are not applied to any component because you've not set any class name.
Just do:
const IndexPage =()=>{
return <div className="grid-container">I'm your index page</div>
}
Like any other HTML element.
I created a ReactJS project using create-react-project command. I npm installed tailwindcss and created a tailwind.config.js file.
Now to make my life easier I also installed an extension called Tailwind CSS IntelliSense and reloaded VSCode. The extension still does not give suggestions in my JavaScript files.
At first, i thought it is maybe because it works only with html extensions or that the reactjs files uses className for adding CSS classes as class keyword is reserved. So, I tried to edit index.html file but not suggestions in HTML files as well.
Please tell what else can I tryout?
Here's how to get Tailwind Intellisense to work with React files
Go to Tailwind CSS settings and add Javascript support "tailwindCSS.includeLanguages": { "plaintext": "javascript" }
Reload vscode
If this doesn't fix things, try using ctrl + space before adding a class name.
View image of Tailwind settings
Edit your settings.json as below:
{
// other settings
"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"html": "HTML"
},
"editor.quickSuggestions": {
"strings": true
}
}
I faced this issue even after configuring tailwindCSS.includeLanguages settings.
So make sure you configure the below settings as well to allow suggestions inside a string.
"editor.quickSuggestions": {
"strings": true
}
Add this at the end of your setting.json file in order to get IntelliSense on both HTML and js file
"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"html": "HTML"
},
Try to delete the "tailwind.config.js" and create it back again with
npx tailwindcss init
and it should start working.
Both combined worked for me.
"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"html": "HTML"
},
and
Try to delete the "tailwind.config.js" and create it back again with
npx tailwindcss init
You have to include the files, in which you want to work with Tailwind CSS in your tailwind.config.js file.
You can replace:
content: [],
with
content: ["*"],
It will include all files in your project. Save it and now the Tailwind CSS IntelliSense will popup the suggestions.
I had the same issue. I uninstalled Tailwind CSS IntelliSense, then reinstalled it back. And the problem was solved.
Placed the following snippit in VSCode’s settings.json file.
"tailwindCSS.emmetCompletions": true, // remove this line if you don't use Emmet
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
"strings": true
},
"css.validate": false,
Add to settings.json
You can open via
cmd + shift + p => Prefences: Open Settings (JSON)
"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"javascriptreact": "javascriptreact",
"typescript": "typescript",
"typescriptreact": "typescriptreact",
}
The last version of tailwindcss for this time is 3.2.1 and it seems this version is not matched with the last version of vsCode or IntelliJ IDEA so I downgraded tailwind to 3.1.8 (npm i tailwindcss#3.1.8) and then those ways that guys suggest work now
I added these lines of code but it did not work. However, updating my vscode to the latest version did the trick for me.
"tailwindCSS.includeLanguages": { "plaintext": "javascript" },
"tailwindCSS.emmetCompletions": true,
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
"strings": true
},
"css.validate": false,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
I'm trying to format code blocks in markdown files for posts to a website with Gatsby.
I would like the code blocks to be displayed in one of VSCode's color themes (Dark +, for instance). I have npm installed gatsby-remark-vscode, and put the plugin in my gatsby-config.js file:
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [{
resolve: 'gatsby-remark-vscode',
options: {
colorTheme: 'Dark+ (default dark)',
injectStyles: true,
extensions: [{
identifier: 'sdras.night-owl',
version: '1.1.3'
}],
extensionDataDirectory:
path.resolve('extensions'),
logLevel: 'error'
}
}]
}
},
]
I have required 'path' at the top of my gatsby-config.js file:
const path = require('path');
I have imported the stylesheet in my gatsby-browser.js file:
import 'gatsby-remark-vscode/styles.css';
I have used back-ticks to format in my markdown file (the file that contains the blog post) like this:
```js
(CODE EXAMPLE)
```
When I npm run develop, I do not see the correct VSCode formatting for the code block, just a code block similar to what we see on StackOverflow code blocks. I would greatly appreciate any advice on how to render the correct theme in my code blocks.
Oops - looks like I was using a previous version of gatsby-remark-vscode. Updating the version and following the config instructions in the README solved this.
trying Neutrino for the first time to jumpstart a react project. Want to add google fonts to it; tried passing google URLS in as a links array in config/html but no joy. suggestions?
There are two ways you could load Google fonts into your Web-based Neutrino project.
The easiest would probably be to install the font you would like from npm, such as Works Sans:
npm install --save typeface-work-sans
Which you can then import into your project with:
import 'typeface-work-sans';
The second method would involve the links way you mentioned, by adding an external stylesheet to your local Web-based .neutrinorc.js (using react for this example):
// .neutrinorc.js
module.exports = {
use: [
['#neutrinojs/react', {
html: {
links: [
{
href: 'https://fonts.googleapis.com/css?family=Work+Sans',
rel: 'stylesheet'
}
]
}
}]
]
};
I'm code splitting my JavaScript files with React Router and Webpack 2 like this:
export default {
path: '/',
component: Container,
indexRoute: {
getComponent(location, cb) {
if (isAuthenticated()) {
redirect();
} else {
System.import('../landing-page/LandingPage')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
},
childRoutes: [
{
path: 'login',
getComponent(location, cb) {
System.import('../login/Login')
.then(loadRoute(cb))
.catch(errorLoading);
},
},
{ /* etc */
}
};
Which results on this bundle:
public/
vendor.bundle.js
bundle.js
0.bundle.js
1.bundle.js
2.bundle.js
Which means that the final user is getting only the JavaScript that he/she needs, according to the route that he/she is in.
The thing is: for the css part, I'm not finding any resource to do same thing, which is to split the CSS according the user's needs.
Is there a way to do it with Webpack 2 and React Router?
Yes, this can be done. You'll need CommonsChunkPlugin in addition to ExtractTextPlugin. Also, define multiple entry points
entry: {
A: "./a",
B: "./b",
C: "./c",
},
and configure ExtractTextPlugin to use entry point names as CSS file names
new ExtractTextPlugin({
filename: "[name].css"
}),
See a full example here:
https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle
While I may not answer your question how to split css files so that only the necessary ones are loaded the way you want the question to be answered (no plugin or that sort of thing), I hope to give you a possible alternative.
styled-components use the new ES6 feature tagged template literal to style the components inside the javascript file. I think using this library would solve your problem of loading only the necessary css files, because there would be no more css files per se.
react-boilerplate chose styled-components over sass, because
styled-components have a more powerful approach: instead of trying
to give a styling language programmatic abilities, it pulls logic and
configuration out into JS these features belong.
So using styled-components would not only solve your problem of loading only the necessary css, but it would further add to the decoupling of your application, makes it easier to test the design and reason about your app.
Here's the live demo where you can experiment with the styled-components and check how it works.