.
675 |
--------------------------------------------------------------------------------
/REACT.md:
--------------------------------------------------------------------------------
1 | # REACT Cheat Sheet
2 |
3 | Sources:
4 | - https://fr.reactjs.org/
5 |
6 | ## BASIC COMPONENT
7 |
8 | ```javascript
9 | /**
10 | * External dependencies
11 | */
12 | import PropTypes from 'prop-types';
13 | import classnames from 'classnames';
14 | import { __ } from '@wordpress/i18n';
15 |
16 | /**
17 | * Internal dependencies
18 | */
19 |
20 | const MyComponent = ( {
21 | className,
22 | propOne,
23 | propTwo,
24 | } ) => {
25 |
26 | return (
27 |
28 | {__( 'this is the component', 'textdomain' )}
29 |
30 | );
31 | };
32 |
33 | Countdown.propTypes = {
34 | className: PropTypes.string,
35 | propOne: PropTypes.string,
36 | propTwo: PropTypes.number,
37 | };
38 |
39 | export default MyComponent;
40 | ```
41 |
42 | ## INLINE FUNCTIONS
43 | To pass an inline function to a component prop:
44 |
45 | ```javascript
46 | myProp={ () => {
47 | // the function
48 | } }
49 | ```
50 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # This is just the list of my personal cheat sheets
2 | I was trying to find a way to store all the useful stuff I use everyday in one single place, and I thought that GitHub would be a perfect place for that!
3 |
4 | Keen to [contribute](CONTRIBUTING.md)?
5 |
6 | - [Git - Basics](git.md)
7 | - [Git - pull request workflow](git.md)
8 | - [CSS: SaSS](sass.md)
9 | - [CSS: Flexbox](css-flexbox.md)
10 | - [NVM](nvm.md)
11 | - [REACT](REACT.md)
12 | - [console.log()](console.log.md)
13 |
14 | Crafted with ♥ by [Remi Corson](http://remicorson.com).
15 |
--------------------------------------------------------------------------------
/console.log.md:
--------------------------------------------------------------------------------
1 | # console.log() Cheat Sheet
2 |
3 |
4 | ## Usefeul functions
5 |
6 | | Command | Description |
7 | | --- | --- |
8 | | `console.log( 'message' )` | Prints "message" in the console |
9 | | `console.assert( myVar, 'myVar is false' )` | Prints "myVar is false" if `myVar = false`, doesn't print anything if true |
10 | | `console.table( obj )` | Displays nice formatted table |
11 | | `console.group( 'Test' )` | Groups entries |
12 | | `console.groupCollapsed( 'Test' )` | Groups entries collapsed by default |
13 | | `console.dir( obj )` | Groups object attributes |
14 | | `console.count()` | Increments a counter |
15 | | `console.time()` | Starts a timer |
16 | | `console.timeLog()` | End the timer and outputs time after last console.time() call |
17 | | `console.trace( 'Start tracing' )` | Trace functions order |
18 | | `console.log( '%c Sun is shining', 'color: #B54708; background-color: #FEDF89; font-weight: bold; padding: 5px; border-radius: 4px;' )` | Custom styling |
19 | | `console.clear()` | Clears the console |
20 |
--------------------------------------------------------------------------------
/css-flexbox.md:
--------------------------------------------------------------------------------
1 |
2 | # Flexbox Layout
3 |
4 | The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
5 |
6 | Sources:
7 | - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
8 | - http://apps.workflower.fi/css-cheats/?name=flexbox
9 |
10 | Useful resources:
11 | - http://www.flexboxpatterns.com/home
12 | - https://philipwalton.github.io/solved-by-flexbox/
13 | - https://milligram.github.io/
14 |
15 | ## Properties for the Parent (flex container)
16 |
17 | ### Display
18 |
19 | Defines a flex container. It enables a flex context for all its direct children.
20 |
21 | | Code | Description |
22 | | ------------- | ------------- |
23 | | `display: flex;` | block |
24 | | `display: inline-flex;` | inline |
25 |
26 | ### flex-direction
27 |
28 | Establishes the main-axis, thus defining the direction flex items are placed in the flex container.
29 |
30 | | Code | Description |
31 | | ------------- | ------------- |
32 | | `flex-direction: row;` | (default) left to right in `ltr`; right to left in `rtl` |
33 | | `flex-direction: row-reverse;` | right to left in `ltr`; left to right in `rtl` |
34 | | `flex-direction: column;` | same as `row` but top to bottom |
35 | | `flex-direction: column-reverse;` | same as `row-reverse` but bottom to top |
36 |
37 | ### flex-wrap
38 |
39 | By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.
40 |
41 | | Code | Description |
42 | | ------------- | ------------- |
43 | | `flex-wrap: nowrap;` | (default) single-line / left to right in `ltr`; right to left in `rtl` |
44 | | `flex-wrap: wrap;` | multi-line / left to right in `ltr`; right to left in `rtl` |
45 | | `flex-wrap: wrap-reverse;` | multi-line / right to left in `ltr`; left to right in `rtl` |
46 |
47 | ### flex-flow
48 |
49 | Shorthand `flex-direction` and `flex-wrap` properties, which together define the flex container's main and cross axes. Default is `row nowrap`.
50 |
51 | `flex-flow: <'flex-direction'> || <'flex-wrap'>`
52 |
53 | ### justify-content
54 |
55 | Defines the alignment along the main axis.
56 |
57 | | Code | Description |
58 | | ------------- | ------------- |
59 | | `justify-content: flex-start;` | (default) items are packed toward the start line |
60 | | `justify-content: center;` | items are centered along the line |
61 | | `justify-content: flex-end;` | items are packed toward to end line |
62 | | `justify-content: space-between;` | items are evenly distributed in the line; first item is on the start line, last item on the end line |
63 | | `justify-content: space-around;` | items are evenly distributed in the line with equal space around them |
64 |
65 | ### align-items
66 |
67 | Defines the default behaviour for how flex items are laid out along the cross axis on the current line
68 |
69 | | Code | Description |
70 | | ------------- | ------------- |
71 | | `align-items: flex-start;` | cross-start margin edge of the items is placed on the cross-start line |
72 | | `align-items: center;` | items are centered in the cross-axis |
73 | | `align-items: flex-end;` | cross-end margin edge of the items is placed on the cross-end line |
74 | | `align-items: stretch;` | (default) stretch to fill the container (still respect min-width/max-width) |
75 | | `align-items: baseline;` | items are aligned such as their baselines align |
76 |
77 | ### align-content
78 |
79 | Aligns a flex container's lines within when there is extra space in the cross-axis.
80 |
81 | | Code | Description |
82 | | ------------- | ------------- |
83 | | `align-content: flex-start;` | lines packed to the start of the container |
84 | | `align-content: center;` | lines packed to the center of the container |
85 | | `align-content: flex-end;` | lines packed to the end of the container |
86 | | `align-content: space-between;` | lines evenly distributed; the first line is at the start of the container while the last one is at the end |
87 | | `align-content: space-around;` | lines evenly distributed with equal space around each line |
88 | | `align-content: stretch;` | (default) lines stretch to take up the remaining space |
89 |
90 | ## Properties for the Children (flex items)
91 |
92 | ### order
93 |
94 | To control the order to display elements in a container.
95 |
96 | ```css
97 | .item {
98 | order: ;
99 | }
100 | ```
101 |
102 | ### flex-grow
103 |
104 | This defines the ability for a flex item to grow if necessary. If all items have `flex-grow` set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).
105 |
106 | ```css
107 | .item {
108 | flex-grow: ; /* default 0 */
109 | }
110 | ```
111 |
112 | ### flex-shrink
113 |
114 | This defines the ability for a flex item to shrink if necessary.
115 |
116 | ```css
117 | .item {
118 | flex-shrink: ; /* default 1 */
119 | }
120 | ```
121 |
122 | ### flex-basis
123 |
124 | This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The `auto` keyword means "look at my width or height property" (which was temporarily done by the `main-size` keyword until deprecated). The `content` keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren `max-content`, `min-content`, and `fit-content` do.
125 |
126 | ```css
127 | .item {
128 | flex-basis: | auto; /* default auto */
129 | }
130 | ```
131 |
132 | ### flex
133 |
134 | This is the shorthand for `flex-grow`, `flex-shrink` and `flex-basis` combined. The second and third parameters (`flex-shrink` and `flex-basis`) are optional. Default is `0 1 auto`. **It is recommended that you use this shorthand property rather than set the individual properties**. The short hand sets the other values intelligently.
135 |
136 | ```css
137 | .item {
138 | flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ]
139 | }
140 | ```
141 |
142 | ### align-self
143 |
144 | This allows the default alignment (or the one specified by `align-items`) to be overridden for individual flex items.
145 |
146 | Please see the `align-items` explanation to understand the available values.
147 |
148 | ```css
149 | item {
150 | align-self: auto | flex-start | flex-end | center | baseline | stretch;
151 | }
152 | ```
153 |
154 | Note that `float`, `clear` and `vertical-align` have no effect on a flex item.
155 |
--------------------------------------------------------------------------------
/css-selectors.md:
--------------------------------------------------------------------------------
1 |
2 | # CSS Selectors
3 |
4 | Here are the most useful CSS selectors:
5 |
6 | | Code | Description |
7 | | ------------- | ------------- |
8 | | [attr="value"] | = exact |
9 | | [class~="box"] | ~= has word |
10 | | [href$=".doc"] | $= ends in |
11 | | [class*="-is-"] | *= contains |
12 | | h3 + p | + adjacent sibling |
13 | | article ~ footer | ~ far sibling |
14 | | .container > .box | > direct child |
15 | | :target (h2#foo:target) | |
16 | | :disabled | |
17 | | :nth-child | |
18 | | :nth-child(3n) | |
19 | | :nth-child(3n+2) | |
20 | | :nth-child(-n+4) | |
21 | | :nth-last-child(...) | |
22 | | :first-of-type | |
23 | | :last-of-type | |
24 | | :nth-of-type | |
25 | | :only-of-type | only child of its parent thats like that |
26 | | :only-child | |
27 |
--------------------------------------------------------------------------------
/git-pull-request.md:
--------------------------------------------------------------------------------
1 | Here are a few steps to create a pull request.
2 |
3 | # 1. Fork a repo
4 |
5 | First, you'll need to fork the repo. This is not mandatory, though. See how to [fork a repo](https://help.github.com/articles/fork-a-repo/).
6 |
7 | # Clone a forked repo locally
8 | ```
9 | cd /your-git-folder
10 | git clone git@github.com:/.git --recursive
11 | cd
12 | ```
13 |
14 | # 2. Link to upstream
15 |
16 | ```
17 | git remote add upstream git@github.com:/.git
18 | git remote
19 | ```
20 |
21 | # 3. Update fork
22 |
23 | ```
24 | git fetch upstream
25 | git merge upstream/master
26 | git push origin master
27 | ```
28 |
29 | # 4. Create a new branch
30 |
31 | ```
32 | git checkout -b
33 | ```
34 |
35 | # 5. Do your magic
36 |
37 | Write your code, fix issue, do some magic stuff!
38 |
39 | # 6. Send the fix
40 |
41 | ```
42 | git add .
43 | git commit -am 'message'
44 | git push origin
45 | ```
46 |
47 | # 7. Do the Pull Request on Github and delete branch
48 |
49 | When PR is merged, delete remote branch on github directly and delete local branch using the following command:
50 |
51 | ```
52 | git branch -D
53 | ```
54 |
55 | # When NO Branch:
56 |
57 | if needed (if changes made on GitHub directly and local isn’t updated):
58 |
59 | ```
60 | git fetch origin
61 | git pull origin
62 | ```
63 |
--------------------------------------------------------------------------------
/git.md:
--------------------------------------------------------------------------------
1 | # Git Cheat Sheet
2 |
3 | Sources:
4 | - https://www.git-tower.com/blog/git-cheat-sheet/
5 | - https://services.github.com/on-demand/downloads/github-git-cheat-sheet.pdf
6 |
7 | ## CONFIGURE TOOLING
8 | Configure user information for all local repositories
9 |
10 | | Command | Description |
11 | | --- | --- |
12 | | `$ git config --global user.name "[name]"` | Sets the name you want atached to your commit transactions |
13 | | `$ git config --global user.email "[email address]"` | Sets the email you want atached to your commit transactions |
14 | | `$ git config --global color.ui auto` | Enables helpful colorization of command line output |
15 |
16 | ## Create Repositories
17 | Start a new repository or obtain one from an existing URL
18 |
19 | | Command | Description |
20 | | --- | --- |
21 | | `$ git init [project-name]` | Creates a new local repository with the specified name |
22 | | `$ git clone [url]` | Downloads a project and its entire version history |
23 |
24 | ## Make Changes
25 | Review edits and craf a commit transaction
26 |
27 | | Command | Description |
28 | | --- | --- |
29 | | `$ git status` | Lists all new or modified files to be commited |
30 | | `$ git diff` | Shows file differences not yet staged |
31 | | `$ git add [file]` | Snapshots the file in preparation for versioning |
32 | | `$ git add .` | Add all curent changes to the next commit |
33 | | `$ git diff --staged` | Shows file differences between staging and the last file version |
34 | | `$ git reset [file]` | Unstages the file, but preserve its contents |
35 | | `$ git commit -m "[descriptive message]"` | Records file snapshots permanently in version history |
36 | | `$ git commit -am "[descriptive message]"` | Snapshot all new files and records file snapshots permanently in version history |
37 |
38 | Create a git patch from uncommitted changes in the current working directory
39 |
40 | | Command | Description |
41 | | --- | --- |
42 | | `git diff > mypatch.diff` | Creates a diff file with the changes |
43 | | `git apply < mypatch.diff --stat` | Applies the changes (remove `--stat` if it fails) |
44 |
45 | To get a clean commit list use this method instead:
46 |
47 | | Command | Description |
48 | | --- | --- |
49 | | `git format-patch master --stdout > new-feature.patch` | Creates a diff file with the changes and a commit message |
50 | | `git am` | Applies the patch |
51 |
52 | ## Group Changes
53 | Name a series of commits and combine completed efforts
54 |
55 | | Command | Description |
56 | | --- | --- |
57 | | `$ git branch` | Lists all local branches in the current repository |
58 | | `$ git branch [branch-name]` | Creates a new branch |
59 | | `$ git checkout [branch-name]` | Switches to the specified branch and updates the working directory |
60 | | `$ git merge [branch]` | Combines the specified branch’s history into the current branch |
61 | | `$ git branch -m [new-name]` | Renames local branch |
62 | | `$ git branch -d [branch-name]` | Deletes the specified branch |
63 | | `$ git fetch origin && git reset --hard origin/master` | Resets local branch to match remote |
64 |
65 | ## Refactor Filenames
66 | Relocate and remove versioned files
67 |
68 | | Command | Description |
69 | | --- | --- |
70 | | `$ git rm [file]` | Deletes the file from the working directory and stages the deletion |
71 | | `$ git rm --cached [file]` | Removes the file from version control but preserves the file locally |
72 | | `$ git mv [file-original] [file-renamed]` | Changes the file name and prepares it for commit |
73 |
74 | ## Suppress Tracking
75 | Exclude temporary files and paths
76 |
77 | | Command | Description |
78 | | --- | --- |
79 | | `temp-*` | A text file named .gitignore suppresses accidental versioning of files and paths matching the specified paterns |
80 | | `$ git ls-files --other --ignored --exclude-standard` | Lists all ignored files in this project |
81 |
82 | ## Save Fragments
83 | Shelve and restore incomplete changes
84 |
85 | | Command | Description |
86 | | --- | --- |
87 | | `$ git stash` | Temporarily stores all modified tracked files |
88 | | `$ git stash pop` | Restores the most recently stashed files |
89 | | `$ git stash list` | Lists all stashed changesets |
90 | | `$ git stash drop` | Discards the most recently stashed changeset |
91 |
92 | ## Review History
93 | Browse and inspect the evolution of project files
94 |
95 | | Command | Description |
96 | | --- | --- |
97 | | `$ git log` | Lists version history for the current branch |
98 | | `$ git log --follow [file]` | Lists version history for a file, including renames |
99 | | `$ git diff [first-branch]...[second-branch]` | Shows content differences between two branches |
100 | | `$ git show [commit]` | Outputs metadata and content changes of the specified commit |
101 |
102 | ## Redo Commits
103 | Erase mistakes and craf replacement history
104 |
105 | | Command | Description |
106 | | --- | --- |
107 | | `$ git reset [commit]` | Undoes all commits afer [commit], preserving changes locally |
108 | | `$ git reset --hard [commit]` | Discards all history and changes back to the specified commit |
109 |
110 | ## Synchronize Changes
111 | Register a repository bookmark and exchange version history
112 |
113 | | Command | Description |
114 | | --- | --- |
115 | | `$ git fetch [bookmark]` | Downloads all history from the repository bookmark |
116 | | `$ git merge [bookmark]/[branch]` | Combines bookmark’s branch into current local branch |
117 | | `$ git push [alias] [branch]` | Uploads all local branch commits to GitHub |
118 | | `$ git pull` | Downloads bookmark history and incorporates changes |
119 |
--------------------------------------------------------------------------------
/nvm.md:
--------------------------------------------------------------------------------
1 | # Install or Update NVM
2 | `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash`
3 |
4 | # Check version
5 | `node -v || node --version`
6 |
7 | # List installed versions of node (via nvm)
8 | `nvm ls`
9 |
10 | # Install specific version of node
11 | `nvm install `
12 |
13 | # Uninstall specific version of node
14 | `nvm uninstall `
15 | (might need to run `nvm deactivate` if trying to uninstall active version of NVM)
16 |
17 | # Set default version of node
18 | `nvm alias default `
19 |
20 | # Switch version of node
21 | `nvm use `
22 |
--------------------------------------------------------------------------------
/sass.md:
--------------------------------------------------------------------------------
1 | # Using SCSS
2 |
3 | - Website: http://sass-lang.com/
4 | - Docs: http://sass-lang.com/guide
5 |
6 | ## Global Setup
7 |
8 | Install on OS X: `sudo gem install sass`
9 |
10 | ## CLI Usage
11 |
12 | | Action | Command |
13 | | --- | --- |
14 | | Version info | `sass -v` |
15 | | Compile | `sass styles.scss styles.css` |
16 | | Auto-Compile for single files | `sass --watch styles.scss:styles.css` |
17 | | Auto-Compile for folders | `sass --watch .` |
18 | | Auto-Compile for folders without sourcemap | `sass --sourcemap=none --style compressed --watch [from_folder]:[to_folder]` |
19 |
20 | ## Modes
21 | | Mode | Description |
22 | | --- | --- |
23 | | `nested` | reflects the structure of the CSS styles and the HTML document they’re styling |
24 | | `expanded` | a more typical human-made CSS style, with each property and rule taking up one line |
25 | | `compact` | each CSS rule takes up only one line, with every property defined on that line |
26 | | `compressed` | takes up the minimum amount of space possible |
27 |
28 | ## Variables
29 | Reusable color definition
30 |
31 | ```scss
32 | $color: black;
33 |
34 | p {
35 | color: $color;
36 | }
37 | ```
38 |
39 | ## Mixins
40 | Reusable blocks of definitions. Use `@include` to apply mixins to elements.
41 |
42 | ```scss
43 | @mixin border-radius($radius) {
44 | -webkit-border-radius: $radius;
45 | -moz-border-radius: $radius;
46 | -ms-border-radius: $radius;
47 | border-radius: $radius;
48 | }
49 |
50 | .box { @include border-radius(10px); }
51 | ```
52 |
53 | ## Import
54 | Load code from external files. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.
55 |
56 | ```scss
57 | @import 'reset'; // will import content from _reset.scss
58 | ```
59 |
60 | ## Nesting & Abbreviation
61 | ```scss
62 | aside {
63 | border: {
64 | width: 1px;
65 | style: solid;
66 | color: $color;
67 | }
68 | }
69 |
70 | nav {
71 | background: none;
72 | ul {
73 | list-style-type: none;
74 | a {
75 | color: $color;
76 | &:hover, &:focus, &:active { // Skip default space: `a:hover` instead of `a :hover`
77 | color: red;
78 | }
79 | }
80 | }
81 | body.blog & { // Skip default nesting: `body.blog nav` instead of `nav body.blog`
82 | background: green;
83 | }
84 | }
85 | ```
86 |
87 | ## Color Functions
88 |
89 | ### Create Color Dynamically
90 | | SCSS Code | Description |
91 | | --- | --- |
92 | | `rgb(100, 120, 140)` | Creates color from given values |
93 | | `rgba(100, 120, 140, .5)` | Creates color from given values |
94 | | `rgba($color, .5)` | Creates color from given values with given alpha |
95 |
96 | ### Modify HSLA Colors
97 | | SCSS Code | Description |
98 | | --- | --- |
99 | | `darken($color, 5%)` | Darkens color by given % |
100 | | `lighten($color, 5%)` | Lightens color by given % |
101 | | `grayscale($color)` | Greyscales color |
102 | | `saturate($color, 5%)` | Saturates color by given % |
103 | | `desaturate($color, 5%)` | Desaturates color by given % |
104 | | `invert($color)` | Inverts color |
105 | | `fade-in($color, .5)` | Sets opacity to given % |
106 | | `fade-out($color, .5)` | Halves opacity to given % |
107 |
108 | ## Numbers & Maths
109 | | SCSS Code | Description |
110 | | --- | --- |
111 | | `floor(3.5)` | Round fractions down |
112 | | `ceil(3.5)` | Round fractions up |
113 | | `round(3.5)` | Rounds a float |
114 | | `abs(3.5)` | Absolute value |
115 | | `min(1, 2, 3)` | Find lowest value |
116 | | `max(1, 2, 3)` | Find highest value |
117 | | `percentage(.5)` | Gets corresponding percantge (50%) |
118 | | `random(30)` |Returns random value between 1 and given value |
119 |
120 | ## Comments
121 | | SCSS Code | Description |
122 | | --- | --- |
123 | | `// SCSS comments` | not visible in CSS |
124 | | `/* CSS comments */` | visible in CSS |
125 |
126 | ## Conditional Statements
127 | ```scss
128 | // If/Else
129 | p {
130 | margin-left: if( $i % 2 == 0, 0px, 50px );
131 | }
132 | ```
133 |
134 | ## Loops
135 | ```scss
136 | $list: (orange, purple, teal);
137 | @each $item in $list {
138 | .#{$item} {
139 | background: $item;
140 | }
141 | }
142 | ```
143 |
144 | ```scss
145 | @for $i from 1 through $total {
146 | .ray:nth-child(#{$i}){
147 | background: adjust-hue( blue, $i * $step );
148 | }
149 | }
150 | ```
151 |
152 | ## Extend/Inheritance
153 | To share a set of CSS properties from one selector to another
154 |
155 | ```scss
156 | .infobox {
157 | border: 1px solid #ccc;
158 | padding: 10px;
159 | color: $color;
160 | }
161 |
162 | .success {
163 | @extend .infobox;
164 | border-color: green;
165 | }
166 | ```
167 |
168 | ## Abstracts
169 | The % prefix creates rules that never get used on their own.
170 | Theses classes are solely for the purpose of extending.
171 |
172 | ```scss
173 | %info {
174 | position: absolute;
175 | }
176 |
177 | .notice {
178 | @extend %info;
179 | }
180 | ```
181 |
--------------------------------------------------------------------------------
/tailwind.md:
--------------------------------------------------------------------------------
1 | # Adding Tailwind CSS to WordPress Plugins
2 |
3 | This guide explains how to add Tailwind CSS support to WordPress plugins with a common file structure.
4 |
5 | ## Prerequisites
6 |
7 | - Node.js and npm installed on your system
8 | - A WordPress plugin with a structure similar to:
9 | ```
10 | plugin-name/
11 | ├── includes/
12 | │ └── class-plugin-name.php
13 | ├── assets/
14 | │ ├── css/
15 | │ └── js/
16 | └── plugin-name.php
17 | ```
18 |
19 | ## Steps
20 |
21 | 1. **Initialize npm and install dependencies**
22 |
23 | In your plugin's root directory, run:
24 | ```bash
25 | npm init -y
26 | npm install tailwindcss postcss autoprefixer
27 | ```
28 |
29 | 2. **Create Tailwind configuration file**
30 |
31 | Run:
32 | ```bash
33 | npx tailwindcss init
34 | ```
35 |
36 | 3. **Update `tailwind.config.js`**
37 |
38 | ```javascript:tailwind.config.js
39 | module.exports = {
40 | content: [
41 | './includes/**/*.php',
42 | './assets/**/*.js',
43 | ],
44 | theme: {
45 | extend: {
46 | colors: {
47 | primary: {
48 | 50: '#faf8fc',
49 | 100: '#f2eef9',
50 | 200: '#e9e0f4',
51 | 300: '#d7c8ea',
52 | 400: '#bca4dc',
53 | 500: '#a280cc',
54 | 600: '#7f54b3',
55 | 700: '#754fa1',
56 | 800: '#634584',
57 | 900: '#51386b',
58 | 950: '#35204b',
59 | },
60 | },
61 | },
62 | },
63 | plugins: [],
64 | }
65 | ```
66 |
67 | 4. **Create PostCSS configuration**
68 |
69 | Create `postcss.config.js` in the plugin root:
70 | ```javascript:postcss.config.js
71 | module.exports = {
72 | plugins: {
73 | tailwindcss: {},
74 | autoprefixer: {},
75 | }
76 | }
77 | ```
78 |
79 | 5. **Create Tailwind CSS file**
80 |
81 | Create `assets/css/tailwind.css`:
82 | ```css:assets/css/tailwind.css
83 | @tailwind base;
84 | @tailwind components;
85 | @tailwind utilities;
86 | ```
87 |
88 | 6. **Add build script**
89 |
90 | In `package.json`, add:
91 | ```json:package.json
92 | {
93 | "scripts": {
94 | "build": "tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/style.css --minify",
95 | "start": "tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/style.css --watch"
96 | }
97 | }
98 | ```
99 |
100 | 7. **Build CSS**
101 |
102 | Run:
103 | ```bash
104 | npm run build
105 | ```
106 |
107 | 8. **Update enqueue method**
108 |
109 | In your main plugin class (e.g., `includes/class-plugin-name.php`), update the `enqueue_scripts` method:
110 | ```php:includes/class-plugin-name.php
111 | public function enqueue_scripts() {
112 | wp_enqueue_style( 'plugin-name-style', plugin_dir_url( __DIR__ ) . 'assets/css/style.css', array(), filemtime( plugin_dir_path( __DIR__ ) . 'assets/css/style.css' ) );
113 | wp_enqueue_script( 'plugin-name-script', plugin_dir_url( __DIR__ ) . 'assets/js/scripts.js', array( 'jquery' ), filemtime( plugin_dir_path( __DIR__ ) . 'assets/js/scripts.js' ), true );
114 | }
115 | ```
116 |
117 | 9. **Ensure enqueue action is added**
118 |
119 | In the constructor of your main plugin class:
120 | ```php:includes/class-plugin-name.php
121 | public function __construct() {
122 | add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
123 | // Other actions...
124 | }
125 | ```
126 |
127 | ## Usage
128 |
129 | - Use Tailwind classes in your PHP files.
130 | - Run `npm run build` after making changes to Tailwind classes or configuration.
131 | - The generated CSS will be in `assets/css/style.css`.
132 |
133 | ## Notes
134 |
135 | - Adjust file paths if your plugin structure differs.
136 | - Consider using a watch script for development to automatically rebuild CSS.
137 |
--------------------------------------------------------------------------------