Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 56f4d69

Browse files
committed
Add postcss and tailwind 💅
1 parent 4921532 commit 56f4d69

File tree

8 files changed

+1564
-25
lines changed

8 files changed

+1564
-25
lines changed

‎.stylelintrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "stylelint-config-recommended",
3+
"rules": {
4+
"at-rule-no-unknown": [ true, {
5+
"ignoreAtRules": [
6+
"layer",
7+
"tailwind"
8+
]
9+
}],
10+
}
11+
}

‎package.json‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
"@babel/core": "^7.10.2",
1111
"@babel/preset-env": "^7.10.2",
1212
"@babel/preset-react": "^7.10.1",
13+
"autoprefixer": "^10.1.0",
1314
"babel-loader": "^8.1.0",
15+
"css-loader": "^5.0.1",
1416
"eslint": "^7.2.0",
1517
"eslint-config-airbnb": "^18.1.0",
1618
"eslint-config-prettier": "^6.11.0",
@@ -22,15 +24,22 @@
2224
"eslint-plugin-unicorn": "^20.1.0",
2325
"html-loader": "^1.1.0",
2426
"html-webpack-plugin": "^4.3.0",
27+
"postcss": "^8.2.1",
28+
"postcss-import": "^14.0.0",
29+
"postcss-loader": "^4.1.0",
2530
"prettier": "^2.0.5",
2631
"pretty-quick": "^2.0.1",
2732
"prop-types": "^15.7.2",
33+
"style-loader": "^2.0.0",
34+
"stylelint": "^13.8.0",
35+
"stylelint-config-recommended": "^3.0.0",
2836
"webpack": "^4.43.0",
2937
"webpack-cli": "^3.3.11",
3038
"webpack-dev-server": "^3.11.0"
3139
},
3240
"dependencies": {
3341
"react": "^16.13.1",
34-
"react-dom": "^16.13.1"
42+
"react-dom": "^16.13.1",
43+
"tailwindcss": "^2.0.2"
3544
}
3645
}

‎postcss.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
plugins: [
3+
require('postcss-import'),
4+
require('tailwindcss'),
5+
require('autoprefixer')
6+
]
7+
};

‎src/app.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState } from "react";
2+
import "./assets/css/style.css";
23

34
const App = () => {
45
const [counter, setCounter] = useState(0);
@@ -7,10 +8,10 @@ const App = () => {
78
}, 1000);
89

910
return (
10-
<>
11+
<divclassName="p-6 max-w-sm mx-auto">
1112
<h1>Title</h1>
1213
<span>{counter}</span>
13-
</>
14+
</div>
1415
);
1516
};
1617

‎src/assets/css/style.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*
2+
* default tailwind theme
3+
* https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js
4+
*/
5+
@import "tailwindcss/base";
6+
@import "tailwindcss/components";
7+
@import "tailwindcss/utilities";
8+
9+
@import "./typography";

‎src/assets/css/typography.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@layer base {
2+
h1 {
3+
@apply text-3xl;
4+
}
5+
}

‎webpack.config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ module.exports = {
1111
loader: "babel-loader"
1212
}
1313
},
14+
{
15+
test: /\.css$/i,
16+
use: [
17+
"style-loader",
18+
"css-loader",
19+
"postcss-loader"
20+
],
21+
},
1422
{
1523
test: /\.html$/,
1624
use: [

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /